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

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

$('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>