快捷導(dǎo)航

jQuery操作屬性和樣式詳解

更新時(shí)間：2016年04月13日 16:57:14 投稿：jingxian

下面小編就為大家?guī)?lái)一篇jQuery操作屬性和樣式詳解。小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧

• 區(qū)分 DOM 屬性和元素屬性

<img src="images/image.1.jpg" id="hibiscus" alt="Hibiscus" class="classA" />

通常開發(fā)人員習(xí)慣將id,src,alt等叫做這個(gè)元素的"屬性"。我們將其稱為"元素屬性"。但是在解析成 DOM 對(duì)象時(shí),實(shí)際瀏覽器最后會(huì)將標(biāo)簽元素解析成"DOM 對(duì)象", 并且將元素的"元素屬性"存儲(chǔ)為"DOM 屬性"，兩者是有區(qū)別的。

甚至有些"元素屬性"和"DOM 屬性"的名稱都不一樣,比如上面的元素屬性 class, 轉(zhuǎn)換為 DOM 屬性后對(duì)應(yīng) className。

牢記, 在 javascript 中我們可以直接獲取或設(shè)置"DOM 屬性":

<script type="text/javascript">
  $(function() {
    var img1 = document.getElementById("hibiscus");
    alert(img1.alt);
    img1.alt = "Change the alt element attribute";
    alert(img1.alt);
    img1.className = "classB";
  })
</script>

所以如果要設(shè)置元素的 CSS 樣式類, 要使用的是 DOM 屬性"className"而不是元素屬性"class"。
--------------------------------------------------------------------------------
•操作"Dom 屬性"

在 jQuery 提供了each()函數(shù)用于遍歷 jQuery 包裝集,其中的this指針是一個(gè) DOM 對(duì)象,所以我們可以應(yīng)用這一點(diǎn)配合原生 javascript 來(lái)操作元素的 DOM 屬性:

$("img").each(function(index) {
   alert("index:" + index + ", id:" + this.id + ", alt:" + this.alt);
   this.alt = "changed";
   alert("index:" + index + ", id:" + this.id + ", alt:" + this.alt);
 });

•操作"元素屬性"

我們可以使用 javascript 中的getAttribute和setAttribute來(lái)操作元素的"元素屬性"。在 jQuery 中給你提供了attr()包裝集函數(shù), 能夠同時(shí)操作包裝集中所有元素的屬性:

雖然我們可以使用removeAttr(name)刪除元素屬性,但是對(duì)應(yīng)的 DOM 屬性是不會(huì)被刪除的, 只會(huì)影響 DOM 屬性的值.比如將一個(gè)input元素的readonly元素屬性去掉,會(huì)導(dǎo)致對(duì)應(yīng)的 DOM 屬性變成false(即input變成可編輯狀態(tài)).

•修改 CSS 類和樣式

下表是修改 CSS 類相關(guān)的 jQuery 方法：

注意addClass(class)和removeClass(classes)的參數(shù)可以一次傳入多個(gè) css 類, 用空格分割。removeClass 方法的參數(shù)可選, 如果不傳入?yún)?shù)則移除全部 CSS 類。

同樣當(dāng)我們想要修改元素的具體某一個(gè) CSS 樣式,即修改元素屬性"style"時(shí), jQuery 也提供了相應(yīng)的方法:

• 獲取常用屬性

<!doctype html>
<html lang="zh">
<head>
 <meata charset="utf-8"/>
 <title>get object width</title>
 <script src="jquery-1.11.2.min.js"></script>
 <script>
  $(function() {
   alert("attr(\"width\"):" + $("#testDiv").attr("width")); //undifined
   alert("css(\"width\"):" + $("#testDiv").css("width")); //auto(ie6) 或 1264px(ff)
   alert("width():" + $("#testDiv").width()); //正確的數(shù)值 1264
   alert("style.width:" + $("#testDiv")[0].style.width); //空值
  })
 </script>
</head>
<body>
 <div id="testDiv">test text</div>
</body>
</html>

我們希望獲取測(cè)試圖層的寬度,使用 attr 方法獲取"元素特性"為 undefined, 因?yàn)椴]有為 div 添加 width。而使用 css()方法雖然可以獲取到 style 屬性的值, 但是在不同瀏覽器里返回的結(jié)果不同,IE6 下返回 auto,而 FF 下雖然返回了正確的數(shù)值但是后面帶有"px"。所以 jQuery 提供了 width()方法,此方法返回的是正確的不帶 px 的數(shù)值。

針對(duì)上面的問(wèn)題,jQuery 為常用的屬性提供了獲取和設(shè)置的方法,比如 width()用戶獲取元素的寬度,而 width(val)用來(lái)設(shè)置元素寬度。

下面這些方法可以用來(lái)獲取元素的常用屬性值:

1. 寬和高相關(guān) Height and Width