當前位置：
首頁 >
jQuery - 获取并设置 CSS 类、尺寸
發布時間：2025/6/15
41
豆豆
生活随笔
收集整理的這篇文章主要介紹了
jQuery - 获取并设置 CSS 类、尺寸
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
jQuery - 獲取并設置 CSS 類
通過 jQuery，可以很容易地對 CSS 元素進行操作。
jQuery 擁有若干進行 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() 方法中規定多個類：
[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屬性。看來寫代碼要養成有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 尺寸 方法：
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 元素進行操作。
jQuery 擁有若干進行 CSS 操作的方法：
- addClass() - 向被選元素添加一個或多個類
- removeClass() - 從被選元素刪除一個或多個類
- toggleClass() - 對被選元素進行添加/刪除類的切換操作
- css() - 設置或返回樣式屬性
下面的樣式表將用于本頁的所有例子：
[javascript] view plaincopy
jQuery addClass() 方法
向不同的元素添加 class 屬性。在添加類時，也可以選取多個元素：
[javascript] view plaincopy
也可以在 addClass() 方法中規定多個類：
[javascript] view plaincopy
jQuery removeClass() 方法
如何在不同的元素中刪除指定的 class 屬性：
[javascript] view plaincopy
jQuery toggleClass() 方法
對被選元素進行添加/刪除類的切換操作：
[javascript] view plaincopy
jQuery css() 方法
css() 方法設置或返回被選元素的一個或多個樣式屬性。
返回 CSS 屬性
返回首個匹配元素的 background-color 值：
[javascript] view plaincopy
設置 CSS 屬性
為所有匹配元素設置 background-color 值：
[javascript] view plaincopy
設置多個 CSS 屬性
為所有匹配元素設置 background-color 和 font-size：
[javascript] view plaincopy
jQuery - 尺寸
通過 jQuery，很容易處理元素和瀏覽器窗口的尺寸。
jQuery 尺寸 方法：
- width()
- height()
- innerWidth()
- innerHeight()
- outerWidth()
- outerHeight()
jQuery width() 和 height() 方法
width() 方法設置或返回元素的寬度（不包括內邊距、邊框或外邊距）。
height() 方法設置或返回元素的高度（不包括內邊距、邊框或外邊距）。
下面的例子返回指定的 <div> 元素的寬度和高度：
[javascript] view plaincopy
jQuery innerWidth() 和 innerHeight() 方法
innerWidth() 方法返回元素的寬度（包括內邊距）。
innerHeight() 方法返回元素的高度（包括內邊距）。
下面的例子返回指定的 <div> 元素的 inner-width/height：
[javascript] view plaincopy
jQuery outerWidth() 和 outerHeight() 方法
outerWidth() 方法返回元素的寬度（包括內邊距和邊框）。
outerHeight() 方法返回元素的高度（包括內邊距和邊框）。
下面的例子返回指定的 <div> 元素的 outer-width/height：
[javascript] view plaincopy
outerWidth(true) 方法返回元素的寬度（包括內邊距、邊框和外邊距）。
outerHeight(true) 方法返回元素的高度（包括內邊距、邊框和外邊距）。
jQuery - 更多的 width() 和 height()
下面的例子返回文檔（HTML 文檔）和窗口（瀏覽器視口）的寬度和高度：
[javascript] view plaincopy
下面的例子設置指定的 <div> 元素的寬度和高度：
[javascript] view plaincopy
總結
以上是生活随笔為你收集整理的jQuery - 获取并设置 CSS 类、尺寸的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： JavaScript（19）jQuery
- 下一篇： CSS的三种使用方式