Phương thức css
Phương thức css cho phép lấy
và thay đổi CSS styles của phần tử.
Quan trọng cần nhớ là chúng ta sẽ lấy 'các giá trị
đã tính toán' của thuộc tính (computed style
properties), có thể khác với
giá trị được chỉ định trong CSS styles.
Cú pháp
Lấy một thuộc tính:
$(selector).css(property);
Lấy nhiều thuộc tính, tham số truyền vào là một mảng tên thuộc tính:
$(selector).css(['width', 'height', 'color']);
Thay đổi một thuộc tính:
$(selector).css(property, new value);
Thay đổi nhiều thuộc tính bằng cách truyền chúng dưới dạng đối tượng,
chứa các cặp 'key: value'. Tên thuộc tính
được chỉ định dưới dạng CamelCase:
$(selector).css({fontSize: '12px', color: 'red'});
Hoặc, một cách thay thế:
<p class="www">text</p>
$('.www').css({'font-size':'12px', 'color':'red'});
Chúng ta cũng có thể áp dụng một hàm được chỉ định cho mỗi
phần tử trong bộ chọn. Hàm sẽ nhận tham số đầu tiên là chỉ số của phần tử trong bộ chọn, và tham số thứ hai
là giá trị hiện tại của thuộc tính css được chỉ định
cho phần tử cụ thể đó. Trong đó this
bên trong hàm sẽ trỏ đến phần tử hiện tại.
Thuộc tính CSS của mỗi phần tử sẽ được thay đổi thành giá trị
mà hàm trả về cụ thể cho phần tử đó:
$(selector).css(property name, function(index, current css property value));
Ví dụ
Hãy lấy tất cả các phần tử có lớp www
và thay đổi màu sắc của chúng thành màu đỏ:
<p class="www">text</p>
$('.www').css('color', 'red');
Ví dụ
Hãy lấy tất cả các phần tử có lớp www
và thay đổi màu sắc của chúng thành màu đỏ, và kích thước font chữ
- thành 20px:
<p class="www">text</p>
$('.www').css({color:'red', fontSize:'20px'});
Hoặc, cách thay thế:
<p class="www">text</p>
$('.www').css({'color':'red', 'font-size':'20px'});
