Hướng dẫn jquery to css converter - chuyển jquery sang css

• 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.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.style của thành phần.

Cấu trúc

Thêm style cho thành phần: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:style của 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.4thuộc tính','giá trị']

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

Tiêu đề


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




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

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

Html viết:style="color:red".

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	Trước khi có jQuery Thành phần p

Sau khi có jQuerythuộc tính 01':'giá trị 01','thuộc tính 02':'giá trị 02',...}]

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

Tiêu đề


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




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

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

Html viết:style="color:red".

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	Trước khi có jQuery Thành phần p

Sau khi có jQuerythuộc tính',function[index,giá trị]{}]

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

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

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

Html viết:class="test" đã được thêm width với giá trị nhân 2 [*2].

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	Trước khi có jQuery Thành phần p

Sau khi có jQuerythuộc tính','function']

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

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

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

Html viết:class="test" đã được thêm width với giá trị cộng thêm 300 [+=300].

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	Trước khi có jQuery Thành phần p

Sau khi có jQuerythuộc tính']

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

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: 

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

Html viết:

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 list 01 list 02 list 03 Thành phần ul có chiều cao:	Sau khi có jQuery list 01 list 02 list 03 Thành phần ul có chiều cao: 60px

Thành phần p có class Thành phần pthuộc tính 01','thuộc tính 02'}]

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

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

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

Html viết:

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 list 01 list 02 list 03	Sau khi có jQuery 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]