jQuery修改class屬性和CSS樣式

2021-09-22 20:33:30 字數 2688 閱讀 1088

原文:

jquery修改class屬性和css樣式

類屬性即class屬性,規定類名.

用類選擇器規定樣式的時候,需要為元素指定類名,即class屬性的值.

注意每個html元素只有乙個class屬性.但是class屬性的值可以是多個名稱,即可能包含乙個詞的列表,中間用空格分隔.

具體使用方法見:

用jquery進行類名修改既可以用attr()方法修改」class」屬性,也可以用addclass(),removeclass(),toggleclass()等方法來完成.

addclass()

api: 

addclass()方法向匹配的元素增加指定的類名(乙個或多個).

注意對於元素來說,class屬性可以有多個值.該方法不會移除已經存在的值,而是在原有的基礎上追加乙個或多個class屬性. 

用attr()方法設定class屬性,是乙個覆蓋的過程;而addclass()則是乙個追加的過程.

class之間最終是用空格來隔開的.

如果需要新增多個類,用空格分隔類名.

從1.4開始,這個方法的引數也可以傳入乙個function.

removeclass()

api: 

removeclass()方法從被選元素移除乙個或多個類.如需移除若干類,用空格來分隔類名.

如果沒有傳引數,該方法將會移除被選元素的所有類.

toggleclass()

api: 

toggleclass()方法對被選元素的乙個或多個類進行切換(設定或移除).

該方法檢查每個元素中的指定類,如果存在則刪除,如果不存在則新增.

通過新增引數,可以設定只進行刪除或者只進行新增操作.

格式:$(selector).toggleclass(class,switch)

switch值為true時,只新增;為false時,只刪除.

hasclass()

api: 

hasclass()方法檢查被選元素是否包含指定的class.

還可以用is()方法實現同樣的功能,方法引數傳入乙個選擇器字串,比如」.classname」.

jquery中還有一些方法直接返回或者設定元素的css屬性.

css()

api: 

讀操作: 獲取匹配元素集合中第乙個元素的指定樣式值(乙個或多個).

注:讀取多個樣式值的操作是在jquery v1.9才加入的.

寫操作: 為匹配元素集合中的每乙個元素設定乙個或多個css屬性的值.

傳入的引數可以是單個的鍵值對,也可以是plainobject指定的多個值,還可以是function.(v1.4).

jquery會處理各個瀏覽器中不太相同的一些具體情況,比如w3c的cssfloat在ie中是stylefloat,在jquery中,你可以使用float,然後jquery會幫你把它翻譯成每個瀏覽器中應該有的正確名稱.

還有,jquery會合理解讀css和dom格式的多詞屬性,比如.css(「background-color」)和.css(「backgroundcolor」),它都是可以處理的.

height()和width()

api: 和

高度和寬度屬性.這個寬高值不包括padding,border和margin.除非box-sizing屬性被使用了.

注意寫操作的時候set的是content的寬高,不包括box-sizing的部分.

讀操作仍然是返回集合第乙個元素的屬性值.

.css(「width」)和.width()的區別是:前者返回帶單位的值,比如400px;後者返回不帶單位的畫素數值,即400.

所以如果值需要被用於某種計算,.height()和.width()是被推薦使用的.

讀取得到的數值不一定是整型,並且如果使用者縮放了頁面,其值可能是不正確的,因為瀏覽器沒有暴露這種情況的api.

還有一種不準確的情況,當這個元素的父元素隱藏起來時,該元素的尺寸可能讀不准.

寫操作支援的value型別是字串或者數字.

如果是數字,jquery預設是px為單位.

如果是字串,除了可以數字加單位之外,任何合理的css measurement都可以用,比如100%,50%,或者auto.

position()

api: 

返回第乙個匹配元素相對于父元素(offset parent)的位置.

只有讀操作.

offset()

api: 

返回第乙個匹配元素的座標,或者設定每乙個匹配元素的座標,這個座標是相對於document的.

offsetparent()

api:

返回父類,只有讀操作.

scrollleft()和scrolltop()

api: 和

jquery api: 

w3school 參考手冊:

屬性操作: 

css操作:

css類選擇器: 

jQuery修改class屬性和CSS樣式

類屬性即class屬性,規定類名.用類選擇器規定樣式的時候,需要為元素指定類名,即class屬性的值.注意每個html元素只有乙個class屬性.但是class屬性的值可以是多個名稱,即可能包含乙個詞的列表,中間用空格分隔.具體使用方法見 用jquery進行類名修改既可以用attr 方法修改 cla...

jquery 操作 class 屬性

類屬性即class屬性,規定類名.用類選擇器規定樣式的時候,需要為元素指定類名,即class屬性的值.注意每個html元素只有乙個class屬性.但是class屬性的值可以是多個名稱,即可能包含乙個詞的列表,中間用空格分隔.具體使用方法見 用jquery進行類名修改既可以用attr 方法修改 cla...

jQuery改變元素class屬性

去掉class屬性 this parent li removeclass prev selected 去掉同兄弟的class屬性。this parent li siblings removeclass prev selected li的class selected d的元素新增class屬性。thi...