動態設定元素的css樣式簡單介紹

antzone發表於2017-04-09
CSS

本章節介紹一下如何使用jquery動態設定元素的css樣式。

下面就通過程式碼例項做一下簡單介紹。

一.使用css()方法:

使用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 () {
  $("#bt").click(function () {
    $("#box").css("color","red");
  })
})
</script>
</head>
<body>
<input type="button" id="bt" value="檢視效果" />
<div id="box">螞蟻部落</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 () {
  $("#bt").click(function () {
    $("#box").css({
      "width": "100px",
      "height": "80px",
      "background-color":"#ccc"
    });
  })
})
</script>
</head>
<body>
<input type="button" id="bt" value="檢視效果" />
<div id="box"></div>
</body>
</html>

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

css()方法可以參閱jQuery css()一章節。

二.使用addClass()方法:

此方法可以為指定的元素新增一個樣式類，程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
.antzone {
  width:100px;
  height:80px;
  background-color:#ccc;
}
</style>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function () {
  $("#bt").click(function () {
    $("#box").addClass("antzone");
  })
})
</script>
</head>
<body>
<input type="button" id="bt" value="檢視效果" />
<div id="box"></div>
</body>
</html>

上面的程式碼可以為div元素新增一個名為antzone的樣式類。

addClass()方法可以參閱jQuery addClass()一章節。

相關文章