jQuery 中提供了一系列的 HTML DOM 操作的方法，比起原生 JavaScript 的 DOM 操作，顯得更加地簡便。
本文目錄：
- 操作 CSS；
- 設(shè)置或獲取 CSS 屬性。
操作 CSS
jQuery 提供了一系列的方法來操作 CSS：
- addClass()： 向所選元素添加一個或多個類（多個類名之間使用空格隔開）；
- removeClass()： 從所選元素刪除一個或多個類（多個類名之間使用空格隔開）；
- toggleClass()： 對所選元素進行添加/刪除類的切換操作；
- hasClass()： 檢查被所選元素是否包含指定的 class 名稱，返回值為 Boolean 型。
代碼：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>設(shè)置或返回CSS類</title>
<script src="js/jquery-1.8.3.js"></script>
<style>
.red {
color: red;
}
.green{
color: green;
}
.blue {
color: blue;
}
</style>
</head>
<body>
<h1 id="h1">標題1</h1>
<button id="btn1">addClass()</button>
<h1 id="h2" class="green">標題2</h1>
<button id="btn2">removeClass()</button>
<h1 id="h3" class="blue">標題3</h1>
<button id="btn3">toggleClass()</button>
<h1 id="h4">標題4</h1>
<button id="btn4">hasClass()</button>
<script>
$(function () {
// addClass()：向所選元素添加一個或多個類（多個類名之間使用空格隔開）。
$("#btn1").click(function () {
$("#h1").addClass("red");
});
// removeClass()：從所選元素刪除一個或多個類（多個類名之間使用空格隔開）。
$("#btn2").click(function () {
$("#h2").removeClass("green");
});
// toggleClass()：對所選元素進行添加/刪除類的切換操作。
$("#btn3").click(function () {
$("#h3").toggleClass("blue");
});
// hasClass()：檢查被所選元素是否包含指定的 class 名稱，返回值為 Boolean 型。
$("#btn4").click(function () {
alert($("#h4").hasClass("hh"));
});
});
</script>
</body>
</html>
效果演示：
操作 CSS.gif
設(shè)置或獲取 CSS 屬性
jQuery 中提供了 <code>css()</code> 這個方法來設(shè)置或獲取元素的 CSS 屬性：
- 獲取 CSS 屬性： css("propertyName")；
- 設(shè)置單個 CSS 屬性： css("propertyName","propertyValue")；
- 設(shè)置多個 CSS 屬性： css({"propertyName1":"propertyValue1","propertyName2":"propertyValue2",...})。
代碼：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>設(shè)置或獲取CSS屬性</title>
<script src="js/jquery-1.8.3.js"></script>
<style>
#div1 {
width: 200px;
height: 200px;
background-color: coral;
}
#p1 {
color: darkorchid;
}
</style>
</head>
<body>
<div id="div1"></div>
<button id="btn1">獲取 div 的背景顏色</button>
<p id="p1">這是一個段落。</p>
<button id="btn2">設(shè)置 p 的字體顏色</button>
<p id="p2">這是一個段落。</p>
<button id="btn3">設(shè)置 p 的字體顏色及邊框</button>
<script>
$(function () {
$("#btn1").click(function () {
alert("div 背景顏色為：" + $("#div1").css("backgroundColor"));
});
$("#btn2").click(function () {
$("#p1").css("color", "red");
});
$("#btn3").click(function () {
$("#p2").css({
"color": "blue",
"border": "1px solid red"
});
});
});
</script>
</body>
</html>
效果演示：
設(shè)置或獲取 CSS 屬性.gif
