當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

DOM操作之属性和样式操作

發(fā)布時間：2025/7/25 编程问答 32 豆豆

生活随笔收集整理的這篇文章主要介紹了 DOM操作之属性和样式操作小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

在DOM操作，除了前面的節(jié)點操作以外，常常被用到的操作還有屬性操作和節(jié)點操作，下面，主要來總結一下jQuery中的屬性操作方法和樣式操作方法。

在開始操作前，我們需要先在html中添加如下代碼，后面所有的操作都是基于該DOM結構進行的。

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javascript" src="jquery-3.2.1.js"></script> <style> .red{ color:red; } .blue{ color:blue; } .yellow{ color:yellow; } </style> </head> <body> <p title="選擇你最喜歡的水果">你最喜歡的水果是？</p> <ul> <li title='蘋果' class="red">蘋果</li> <li title='香蕉'>香蕉</li> <li title='荔枝'>荔枝</li> </ul> <script> </script> </body> </html>

屬性操作

獲取和設置屬性

在前面我們提到過一個方法attr()，通過給該方法添加一個參數（屬性名稱），可以獲取相應信息。

$(function(){var txt = $("ul li:eq(1)").attr("title");console.log(txt); })

當給該方法傳遞多個參數時，可以用來設置相關屬性。

$(function(){$("ul li:eq(1)").attr("title","最喜歡的水果");$("ul li:eq(2)").attr({"title":"水果","name":"荔枝"});})

?刪除屬性

在jQuery中，使用removeAttr()方法刪除某個元素的特點屬性。

$(function(){$("p").removeAttr("title");})

樣式操作

獲取和設置樣式

因為class也是和title一樣，也屬于元素的屬性，所以，我們可以使用attr()來獲取和設置元素的class。

$(function(){ var txt1 = $("ul li:eq(0)").attr("class"); console.log(txt1); $("ul li:eq(0)").attr("class","blue"); var txt2 = $("ul li:eq(0)").attr("class"); console.log(txt2); })

???

使用attr()方法設置樣式時，新的樣式覆蓋了之前的樣式。

添加樣式

有的時候，我們希望為某個元素添加樣式，但是又不覆蓋之前原有的樣式，很明顯，attr()并不能滿足我們的要求，這個時候，我們需要用到一個新的方法addClass()，該方法是在不改變原有樣式的基礎上，在后面添加新的樣式。

$(function(){var txt1 = $("ul li:eq(0)").attr("class");console.log(txt1);$("ul li:eq(0)").addClass("blue");var txt2 = $("ul li:eq(0)").attr("class");console.log(txt2);})

? ?

移除樣式

?在上面，我們知道可以用removeAttr()方法刪除元素的屬性，自然，這個方法可以用來刪除元素的樣式。

$(function(){$("ul li:eq(0)").removeAttr("class");})

除了刪除屬性的方法外，jQuery中，還有一個專門用來刪除元素樣式的方法：removeClass()，參數為需要刪除的類名，該方法可以同時刪除一個或多個樣式，多個類名中間用空格間隔即可，當該方法不帶參數時，表明要刪除該元素的所有方法。

$(function(){$("ul li:eq(0)").removeClass("red");})

判斷是否含有某個樣式

hasClass()方法可以用來判斷元素中是否含有某個class，如果有，返回true，否則，返回false。

$(function(){var txt1 = $("ul li:eq(0)").hasClass("red");var txt2 = $("ul li:eq(1)").hasClass("red");console.log(txt1);console.log(txt2);})

轉載于:https://www.cnblogs.com/yuyujuan/p/9410428.html

總結

以上是生活随笔為你收集整理的DOM操作之属性和样式操作的全部內容，希望文章能夠幫你解決所遇到的問題。

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