Người Viết : ViKiMi Editor

Thực hiện Thay đổi các thiết lập thuộc tính CSS giúp linh hoạt trong thiết kế giao diện
Khi sử dụng Thư viện jQuery để thêm các thuộc tính kiểu CSS cho phần tử HTML, jQuery cung cấp cho chúng ta một phương thức hữu ích đó là css(); Phương thức này cho phép thêm một thuộc tính kiểu hoặc nhiều thuộc tính kiểu. Khá đơn giản nhưng cũng có thể mang lại hiệu quả rất tốt. Nếu không có quá nhiều yêu cầu khác nhau thì phương thức này vẫn được sử dụng.
Thiết lập / Lấy về một hoặc nhiều kiểu thuộc tính CSS giúp bạn vận dụng được trong nhiều tình huống khác nhau.
Thư viện jQuery tồn tại Phương thức css() giúp bạn vận dụng.
+ Bạn có thể sử dụng nó để thay đổi một thuộc tính CSS
+ Bạn cũng có thể sử dụng nó để thay đổi nhiều thuộc tính CSS
Và những thay đổi cặp thuộc tính / giá trị kiểu CSS sẽ có thể áp dụng trên một hoặc nhiều phần tử HTML mà bạn chọn.
A ] LẤY VỀ GIÁ TRỊ CỦA THUỘC TÍNH CSS
+ Cú pháp :
$( “SELECTOR” ).css ( “propertyname” );
Bạn sẽ nhận được giá trị thuộc tính kiểu CSS của phần tử đầu tiên được so khớp với SELECTOR.
Do đó, nếu bạn muốn tạo ra các cách lọc dữ liệu khác nhau thì bạn có thể phải sử dụng các thuật toán lọc khác nhau.

EXAMPLE ::
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
Console.log( "Màu nền > " + $( "p" ).css( "background-color " ));
});
});
</script>
</head>
<body>
<h2> Trả về thuộc tính CSS </h2>
<p style="background-color:green" > Đoạn văn màu Xanh. </p>
<p style="background-color:red" > Đoạn văn màu Đỏ. </p>
<p style="background-color:yellow" > Đoạn văn màu Vàng. </p>
<button> Trả về background-color </button>
</body>
</html>
GIÁ TRỊ TRẢ VỀ ::
Sẽ trả về Mầu nền là mã màu xanh lá cây ( Green )
B ] THIẾT LẬP GIÁ TRỊ THUỘC TÍNH KIỂU CỦA CSS
+ Cú pháp :
1 > $( “SELECTOR” ).css ( “propertyname”, “value” );
2 > $( “SELECTOR” ).css(
{ “propertyname”:”value”,
“propertyname”:”value”, …}
);
Bạn có thể sử dụng để thiết lập một hoặc nhiều giá trị thuộc tính kiểu CSS.
Bạn có thể vận dụng trên một hoặc nhiều phần tử HMTL.
EXAMPLE ::
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$( "p, div, span" ).css( { "background-color": "yellow", "font-size": "200%" });
});
});
</script>
</head>
<body>
<h2> Thiết lập thuộc tính CSS </h2>
<p style="background-color:green" > Đoạn văn màu Xanh. </p>
<p style="background-color:red" > Đoạn văn màu Đỏ. </p>
<p style="background-color:yellow" > Đoạn văn màu Vàng. </p>
<div style="background-color:cyan"> Thân trang </div>
<h3><span> Phần tử nội tuyến cuối trang </span><h3>
<button> Thiết lập background-color </button>
</body>
</html>
KẾT QUẢ ::
+ Tất cả các phần tử HTML <p> <div> <span> sẽ đều được thiết lập mầu nền là yellow.
+ Cũng có thể sử dụng các bộ lọc khác nhau để có kết quả khác nhau
Như vậy, bạn có thể sử dụng phương thức CSS() của thư viện jQuery để thay đổi các giá trị thuộc tính kiểu CSS của các phần tử HTML một cách linh động. Điều này cho phép linh động hơn trong lập trình. Thay vì các giá trị thuộc tính kiểu CSS luôn được thiết lập một lần khi sử dụng ngôn ngữ CSS. Bằng cách này có thể thay đổi chúng luôn luôn khi cần.
+ Thư viện jQuery cung cấp cho chúng ta khá nhiều khả năng thao tác dữ liệu