jQuery - 獲取并設置 CSS 類
通過 jQuery，可以很容易地對 CSS 元素進行操作。

jQuery 擁有若干進行 CSS 操作的方法：

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

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

.important??

{??

font-weight:bold;??

font-size:xx-large;??

}??

??

.blue??

{??

color:blue;??

}??

jQuery addClass() 方法
向不同的元素添加 class 屬性。在添加類時，也可以選取多個元素：
[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ī)定多個類：
[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() 方法
對被選元素進行添加/刪除類的切換操作：
[javascript] view plaincopy

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

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

});??

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

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

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

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

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

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

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

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

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

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

jQuery 尺寸 方法：

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

jQuery width() 和 height() 方法
width() 方法設置或返回元素的寬度（不包括內邊距、邊框或外邊距）。
height() 方法設置或返回元素的高度（不包括內邊距、邊框或外邊距）。
下面的例子返回指定的 <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() 方法返回元素的寬度（包括內邊距）。
innerHeight() 方法返回元素的高度（包括內邊距）。
下面的例子返回指定的 <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() 方法返回元素的寬度（包括內邊距和邊框）。
outerHeight() 方法返回元素的高度（包括內邊距和邊框）。
下面的例子返回指定的 <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) 方法返回元素的寬度（包括內邊距、邊框和外邊距）。
outerHeight(true) 方法返回元素的高度（包括內邊距、邊框和外邊距）。

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);??

});??

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

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

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

});?

總結

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

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