jQuery 中提供了一系列的 HTML DOM 操作的方法，比起原生 JavaScript 的 DOM 操作，显得更加地简便。
本文目录：
- 操作 CSS；
- 设置或获取 CSS 属性。
操作 CSS
jQuery 提供了一系列的方法来操作 CSS：
- addClass()： 向所选元素添加一个或多个类（多个类名之间使用空格隔开）；
- removeClass()： 从所选元素删除一个或多个类（多个类名之间使用空格隔开）；
- toggleClass()： 对所选元素进行添加/删除类的切换操作；
- hasClass()： 检查被所选元素是否包含指定的 class 名称，返回值为 Boolean 型。
代码：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>设置或返回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
设置或获取 CSS 属性
jQuery 中提供了 <code>css()</code> 这个方法来设置或获取元素的 CSS 属性：
- 获取 CSS 属性： css("propertyName")；
- 设置单个 CSS 属性： css("propertyName","propertyValue")；
- 设置多个 CSS 属性： css({"propertyName1":"propertyValue1","propertyName2":"propertyValue2",...})。
代码：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>设置或获取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">设置 p 的字体颜色</button>
<p id="p2">这是一个段落。</p>
<button id="btn3">设置 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>
效果演示：
设置或获取 CSS 属性.gif
网友评论