Định nghĩa và sử dụng
.css()được dùng để thêm một hoặc nhiều style cho thành phần.- Ngoài ra còn có thể sử dụng
.css()để lấy giá trị style của thành phần.
Cấu trúc
Thêm style cho thành phần:
Thêm nhiều style cho thành phần
.css({'thuộc tính 01':'giá trị 01','thuộc tính 02':'giá trị 02',...})
$('p').css({'color':'yellow','background':'blue'});
Bài học chỉ muốn cho bạn hiểu cách sử dụng .css, muốn biết chi tiết hơn, bạn có thể xem chi tiết thêm tại phần tham khảo.
.css('thuộc tính','giá trị')
Html viết:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Tiêu đề</title>
<script src="https://code.jquery.com/jquery-latest.js"></script>
<script>
$(function(){
$('p.test').css('color','red');
});
</script>
</head>
<body>
<p class="test">Thành phần p có class</p>
<p>Thành phần p</p>
</body>
</html>
Hiển thị trình duyệt:
Ta thấy thành phần p đã được thêm style="color: red".
So sánh code HTML trước và sau khi có jQuery:
| Trước khi có jQuery | Sau khi có jQuery |
|---|---|
<p class="test">Thành phần p có class</p> <p>Thành phần p</p> |
<p class="test" style="color: red;">Thành phần p có class</p> |
.css({'thuộc tính 01':'giá trị 01','thuộc tính 02':'giá trị 02',...})
Html viết:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Tiêu đề</title>
<script src="https://code.jquery.com/jquery-latest.js"></script>
<script>
$(function(){
$('p.test').css({'color':'blue','border':'1px dashed red'});
});
</script>
</head>
<body>
<p class="test">Thành phần p có class</p>
<p>Thành phần p</p>
</body>
</html>
Hiển thị trình duyệt:
Ta thấy thành phần p đã được thêm style="color: red".
So sánh code HTML trước và sau khi có jQuery:
| Trước khi có jQuery | Sau khi có jQuery |
|---|---|
<p class="test">Thành phần p có class</p> <p>Thành phần p</p> |
<p class="test" style="color: blue; border: 1px dashed red;">Thành phần p có class</p> |