.css()
Đị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. .css(‘thuộc tính’,’giá trị’) Cấu trúc $(‘p’).css(‘color’,’red’); 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 […]
Đị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.
.css(‘thuộc tính’,’giá trị’)
Cấu trúc
$('p').css('color','red');
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:
Thành phần p có class
Thành phần p
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> <p>Thành phần p</p> |
.css({‘thuộc tính 01′:’giá trị 01′,’thuộc tính 02′:’giá trị 02’,…})
Cấu trúc
$('p').css({'color':'yellow','background':'blue'});
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:
Thành phần p có class
Thành phần p
Ta thấy thành phần p đã được thêm style="color: blue; border: 1px dashed 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>
<p>Thành phần p</p> |
