jQuery操作CSS
修改 CSS 樣式
修改元素的樣式, 我們可以修改元素 CSS 類或者直接修改元素的樣式。
一個(gè)元素可以應(yīng)用多個(gè) css 類,但是不幸的是在 DOM 屬性中是用一個(gè)以空格分割的字符串存儲(chǔ)的, 而不是數(shù)組。所以如果在原始 javascript 時(shí)代我們想對(duì)元素添加或者刪除多個(gè)屬性時(shí), 都要自己操作字符串。
jQuery 讓這一切變得異常簡(jiǎn)單。
1. 修改 CSS 類
下表是修改 CSS 類相關(guān)的 jQuery 方法：
使用上面的方法, 我們可以將元素的 CSS 類像集合一樣修改,再也不必手工解析字符串。
注意addClass(class)和removeClass(classes)的參數(shù)可以一次傳入多個(gè) css 類, 用空格分割,比如:
$("#btnAdd").bind("click", function(event) {
? ?$("p").addClass("colorRed borderBlue");
});
removeClass 方法的參數(shù)可選, 如果不傳入?yún)?shù)則移除全部 CSS 類:
$("p").removeClass();
2. 修改 CSS 樣式
同樣當(dāng)我們想要修改元素的具體某一個(gè) CSS 樣式,即修改元素屬性"style"時(shí), jQuery 也提供了相應(yīng)的方法:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>使用jQ控制CSS</title>
<script src="http://code.jquery.com/jquery-3.1.1.min.js"></script>
<style type="text/css">
.w1{font-size: 14px;}
.w2{font-size: 20px;
}
</style>
</head>
<body>
<ul>
<li class="w1"><a href="#">公司簡(jiǎn)介</a> </li>
<li class="w1"><a href="#">公司文化</a> </li>
<li class="w1"><a href="#">發(fā)展戰(zhàn)略</a> </li>
<li class="w1"><a href="#">公司簡(jiǎn)介</a> </li>
</ul>
</body>
<script type="text/javascript">
$(function () {
$( ".w1").click(function () {
$(this).removeClass("w1");
$(this).addClass("w2");
$(this).siblings().removeClass("w2");
$(this).siblings().addClass("w1");
});
});
</script>
</html>
