jQuery - 獲取并設(shè)置 CSS 類
通過(guò) jQuery，可以很容易地對(duì) CSS 元素進(jìn)行操作。

jQuery 擁有若干進(jìn)行 CSS 操作的方法：

• addClass() - 向被選元素添加一個(gè)或多個(gè)類
• removeClass() - 從被選元素刪除一個(gè)或多個(gè)類
• toggleClass() - 對(duì)被選元素進(jìn)行添加/刪除類的切換操作
• css() - 設(shè)置或返回樣式屬性

下面的樣式表將用于本頁(yè)的所有例子：
[javascript] view plaincopy

.important??

{??

font-weight:bold;??

font-size:xx-large;??

}??

??

.blue??

{??

color:blue;??

}??

jQuery addClass() 方法
向不同的元素添加 class 屬性。在添加類時(shí)，也可以選取多個(gè)元素：
[javascript] view plaincopy

$("button").click(function(){??

??$("<span?style="background-color:?rgb(255,?255,?204);">h1,h2,p</span>").addClass("blue");??

??$("div").addClass("important");??

});??

也可以在 addClass() 方法中規(guī)定多個(gè)類：
[javascript] view plaincopy

$("button").click(function(){??

??$("#div1").addClass("<span?style="background-color:?rgb(255,?255,?204);">important?blue</span>");??

});??

jQuery removeClass() 方法
如何在不同的元素中刪除指定的 class 屬性：
[javascript] view plaincopy

$("button").click(function(){??

??$("<span?style="background-color:?rgb(255,?255,?204);">h1,h2,p</span>").removeClass("blue");??

});??

jQuery toggleClass() 方法
對(duì)被選元素進(jìn)行添加/刪除類的切換操作：
[javascript] view plaincopy

$("button").click(function(){??

??$("h1,h2,p").toggleClass("blue");??

});??

jQuery css() 方法
css() 方法設(shè)置或返回被選元素的一個(gè)或多個(gè)樣式屬性。

返回 CSS 屬性
返回首個(gè)匹配元素的 background-color 值：
[javascript] view plaincopy

$("p").css("background-color");??

只能返回首個(gè)匹配元素的CSS屬性。看來(lái)寫(xiě)代碼要養(yǎng)成有id或是class的好習(xí)慣。。。。。。

設(shè)置 CSS 屬性
為所有匹配元素設(shè)置 background-color 值：
[javascript] view plaincopy

$("p").css("background-color","yellow");??

注意，這個(gè)可以為所有匹配元素設(shè)置CSS屬性。

設(shè)置多個(gè) CSS 屬性
為所有匹配元素設(shè)置 background-color 和 font-size：
[javascript] view plaincopy

$("p").css({"background-color":"yellow","font-size":"200%"});??

jQuery - 尺寸
通過(guò) jQuery，很容易處理元素和瀏覽器窗口的尺寸。

jQuery 尺寸 方法：

• width()
• height()
• innerWidth()
• innerHeight()
• outerWidth()
• outerHeight()

jQuery width() 和 height() 方法
width() 方法設(shè)置或返回元素的寬度（不包括內(nèi)邊距、邊框或外邊距）。
height() 方法設(shè)置或返回元素的高度（不包括內(nèi)邊距、邊框或外邊距）。
下面的例子返回指定的 <div> 元素的寬度和高度：
[javascript] view plaincopy

$("button").click(function(){??

??var?txt="";??

??txt+="Width:?"?+?$("#div1").width()?+?"</br>";??

??txt+="Height:?"?+?$("#div1").height();??

??$("#div1").html(txt);??

});??

jQuery innerWidth() 和 innerHeight() 方法
innerWidth() 方法返回元素的寬度（包括內(nèi)邊距）。
innerHeight() 方法返回元素的高度（包括內(nèi)邊距）。
下面的例子返回指定的 <div> 元素的 inner-width/height：
[javascript] view plaincopy

$("button").click(function(){??

??var?txt="";??

??txt+="Inner?width:?"?+?$("#div1").innerWidth()?+?"</br>";??

??txt+="Inner?height:?"?+?$("#div1").innerHeight();??

??$("#div1").html(txt);??

});??

jQuery outerWidth() 和 outerHeight() 方法
outerWidth() 方法返回元素的寬度（包括內(nèi)邊距和邊框）。
outerHeight() 方法返回元素的高度（包括內(nèi)邊距和邊框）。
下面的例子返回指定的 <div> 元素的 outer-width/height：
[javascript] view plaincopy

$("button").click(function(){??

??var?txt="";??

??txt+="Outer?width:?"?+?$("#div1").outerWidth()?+?"</br>";??

??txt+="Outer?height:?"?+?$("#div1").outerHeight();??

??$("#div1").html(txt);??

});??

outerWidth(true) 方法返回元素的寬度（包括內(nèi)邊距、邊框和外邊距）。
outerHeight(true) 方法返回元素的高度（包括內(nèi)邊距、邊框和外邊距）。

jQuery - 更多的 width() 和 height()
下面的例子返回文檔（HTML 文檔）和窗口（瀏覽器視口）的寬度和高度：
[javascript] view plaincopy

$("button").click(function(){??

??var?txt="";??

??txt+="Document?width/height:?"?+?$(document).width();??

??txt+="x"?+?$(document).height()?+?"\n";??

??txt+="Window?width/height:?"?+?$(window).width();??

??txt+="x"?+?$(window).height();??

??alert(txt);??

});??

下面的例子設(shè)置指定的 <div> 元素的寬度和高度：
[javascript] view plaincopy

$("button").click(function(){??

??$("#div1").width(500).height(500);??

});?

總結(jié)

以上是生活随笔為你收集整理的jQuery - 获取并设置 CSS 类、尺寸的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。