Hướng dẫn set css jquery

• Trang chủ
• Tham khảo
• jQuery
• jQuery - function
• .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.

Cấu trúc

Thêm style cho thành phần:

• Đã được thêm vào từ phiên bản 1.0

• Đã được thêm vào từ phiên bản 1.4

Lấy giá trị style của thành phần:

• Đã được thêm vào từ phiên bản 1.0

.css['thuộc tính','giá trị']

Html viết:

Tiêu đề


$[function[]{
    $['p.test'].css['color','red'];
}];




Thành phần p có class
Thành phần p

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ó jQuerySau khi có jQuery

Thành phần p có class Thành phần p	Thành phần p có class Thành phần p

.css[{'thuộc tính 01':'giá trị 01','thuộc tính 02':'giá trị 02',...}]

Html viết:

Tiêu đề


$[function[]{
    $['p.test'].css[{'color':'blue','border':'1px dashed red'}];
}];




Thành phần p có class
Thành phần p

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ó jQuerySau khi có jQuery

Thành phần p có class Thành phần p	Thành phần p có class Thành phần p

.css['thuộc tính',function[index,giá trị]{}]

Html viết:

Tiêu đề


p { 
    background: yellow;
    width: 200px;
}


$[function[]{
    $['p.test'].css['width', function[index,value]{
        return parseFloat[ value ] * 2;
    }];
}];




Thành phần p có class
Thành phần p

Hiển thị trình duyệt:

Ta thấy thành phần p có class="test" đã được thêm width với giá trị nhân 2 [*2].

So sánh code HTML trước và sau khi có jQuery:

Trước khi có jQuerySau khi có jQuery

Thành phần p có class Thành phần p	Thành phần p có class Thành phần p

.css['thuộc tính','function']

Html viết:

Tiêu đề


p { 
    background: yellow;
    width: 200px;
}


$[function[]{
    $['p.test'].css['width', '+=300'];
}];




Thành phần p có class
Thành phần p

Hiển thị trình duyệt:

Ta thấy thành phần p có class="test" đã được thêm width với giá trị cộng thêm 300 [+=300].

So sánh code HTML trước và sau khi có jQuery:

Trước khi có jQuerySau khi có jQuery

Thành phần p có class Thành phần p	Thành phần p có class Thành phần p

.css['thuộc tính']

Html viết:

Tiêu đề


$[function[]{
    var ulHeight = $['ul'].css['height'];
    $['span'].text[ulHeight];
    
}];





list 01
list 02
list 03

Thành phần ul có chiều cao: 

Hiển thị trình duyệt:

.css[height] đã lấy giá trị chiều cao của thành phần ul.

So sánh code HTML trước và sau khi có jQuery:

Trước khi có jQuerySau khi có jQuery

list 01 list 02 list 03 Thành phần ul có chiều cao:	list 01 list 02 list 03 Thành phần ul có chiều cao: 60px

.css[{'thuộc tính 01','thuộc tính 02'}]

Html viết:

Tiêu đề


p, ul { float: left; margin-right: 20px;}
li {
    width: 80px;
    list-style: none;
}
li.first { 
    background-color: yellow;
    color: #333;
    height: 40px;
}

li.second { 
    background-color: blue;
    color: #ddd;
    height: 30px;
}

li.third { 
    background-color: red;
    color: yellow;
    height: 60px;
}


$[function[]{
    $["li"].click[function [] {
        var html = ["Click từng phần tử li để xem kết quả:"];
        var styleProps = $[this].css[ ["width", "height", "color", "background-color"] ];
        $.each[ styleProps, function[ prop, value ] {
            html.push[ prop + ": " + value ];
        }];
        $[ "p" ].html[ html.join[ "
" ] ];
    }];
}];





list 01
list 02
list 03

Hiển thị trình duyệt:

.css[height] đã lấy giá trị chiều cao của thành phần ul.

So sánh code HTML trước và sau khi có jQuery:

Trước khi có jQuerySau khi có jQuery - click thành phần li

list 01 list 02 list 03	list 01 list 02 list 03 Click từng phần tử li để xem kết quả: width: 80px height: 40px color: rgb[51, 51, 51] background-color: rgb[255, 255, 0]