.css() | Hàm jQuery | Tham khảo jQuery

Đị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

Thêm một style cho thành phần

$('p').css('color','red');

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'});

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

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

$('p').css(width,function(index,value){
    return parseFloat( value ) * 1.2;
});

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

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

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

.css('thuộc tính'

$('p').css('color');

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

.css({'thuộc tính 01','thuộc tính 02',...})

$('p').css({'color','background'});

.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> <p>Thành phần p</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> <p>Thành phần p</p>

.css('thuộc tính',function(index,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>
<style>
p { 
    background: yellow;
    width: 200px;
}
</style>
<script>
$(function(){
    $('p.test').css('width', function(index,value){
        return parseFloat( value ) * 2;
    });
});
</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ó 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ó 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="width: 400px;">Thành phần p có class</p> <p>Thành phần p</p>

.css('thuộc tính','function')

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>
<style>
p { 
    background: yellow;
    width: 200px;
}
</style>
<script>
$(function(){
    $('p.test').css('width', '+=300');
});
</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ó 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ó 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="width: 500px;">Thành phần p có class</p> <p>Thành phần p</p>

.css('thuộc tính')

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(){
    var ulHeight = $('ul').css('height');
    $('span').text(ulHeight);
    
});
</script>
</head>

<body>
<ul>
<li>list 01</li>
<li>list 02</li>
<li>list 03</li>
</ul>
<p>Thành phần ul có chiều cao: <span><span></p>
</body>
</html>

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

.css({'thuộc tính 01','thuộc tính 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>
<style>
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;
}
</style>
<script>
$(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( "<br>" ) );
    });
});
</script>
</head>

<body>
<ul>
<li class="first">list 01</li>
<li class="second">list 02</li>
<li class="third">list 03</li>
</ul>
<p></p>
</body>
</html>

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ó jQuery	Sau khi có jQuery - click thành phần li
<ul> <li class="first">list 01</li> <li class="second">list 02</li> <li class="third">list 03</li> </ul> <p></p>	<ul> <li class="first">list 01</li> <li class="second">list 02</li> <li class="third">list 03</li> </ul> <p>Click từng phần tử li để xem kết quả:<br> width: 80px<br> height: 40px<br> color: rgb(51, 51, 51)<br> background-color: rgb(255, 255, 0)</p>

.context

.data()