原文:
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...