Love beautiful code? We do too.
Định nghĩa và sử dụng .css() trong jQuery
.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 .css() trong jQuery
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="http://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".
.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="http://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".
.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="http://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).
.css('thuộc tính','function')
Html viết:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Tiêu đề</title>
<script src="http://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).
.css('thuộc tính')
Html viết:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Tiêu đề</title>
<script src="http://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.
.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="http://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.
Unpublished comment
Viết câu trả lời