jQuery css()方法

antzone發表於2017-04-06
jQueryCSS

使用此方法可以很方便的設定元素的css樣式屬性，下面就介紹一下它的用法。

此方法返回或設定匹配的元素的一個或多個樣式屬性。

設定元素的樣式值:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("#antzone").css("color","red");
});
</script>
</head>
<body>
<div id="antzone">螞蟻部落</div>
</body>
</html>

上面的程式碼可以將div中的字型顏色設定為紅色。

一次性設定元素多個樣式，程式碼如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("#antzone").css({
    color:"red",
    fontSize:"16px",
    fontWeight:"bold"
  });
});
</script>
</head>
<body>
<div id="antzone">螞蟻部落</div>
</body>
</html>

上面的程式碼可以為div一次性設定多個樣式屬性。

獲取樣式屬性值:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
#antzone{
  color:red;
  font-size:16px;
  font-weight:bold;
}
</style>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("#antzone").text($("#antzone").css("font-size"));
});
</script>
</head>
<body>
<div id="antzone">螞蟻部落</div>
</body>
</html>

上面的程式碼可以獲取div設定的字型大小。

相關文章