當(dāng)前位置：首頁(yè) > 编程资源 > 编程问答 >内容正文

编程问答

DOM操作之属性和样式操作

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

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

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

在開(kāi)始操作前，我們需要先在html中添加如下代碼，后面所有的操作都是基于該DOM結(jié)構(gòu)進(jìn)行的。

<!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='蘋(píng)果' class="red">蘋(píng)果</li> <li title='香蕉'>香蕉</li> <li title='荔枝'>荔枝</li> </ul> <script> </script> </body> </html>

屬性操作

獲取和設(shè)置屬性

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

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

當(dāng)給該方法傳遞多個(gè)參數(shù)時(shí)，可以用來(lái)設(shè)置相關(guān)屬性。

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

?刪除屬性

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

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

樣式操作

獲取和設(shè)置樣式

因?yàn)閏lass也是和title一樣，也屬于元素的屬性，所以，我們可以使用attr()來(lái)獲取和設(shè)置元素的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()方法設(shè)置樣式時(shí)，新的樣式覆蓋了之前的樣式。

添加樣式

有的時(shí)候，我們希望為某個(gè)元素添加樣式，但是又不覆蓋之前原有的樣式，很明顯，attr()并不能滿足我們的要求，這個(gè)時(shí)候，我們需要用到一個(gè)新的方法addClass()，該方法是在不改變?cè)袠邮降幕A(chǔ)上，在后面添加新的樣式。

$(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()方法刪除元素的屬性，自然，這個(gè)方法可以用來(lái)刪除元素的樣式。

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

除了刪除屬性的方法外，jQuery中，還有一個(gè)專(zhuān)門(mén)用來(lái)刪除元素樣式的方法：removeClass()，參數(shù)為需要?jiǎng)h除的類(lèi)名，該方法可以同時(shí)刪除一個(gè)或多個(gè)樣式，多個(gè)類(lèi)名中間用空格間隔即可，當(dāng)該方法不帶參數(shù)時(shí)，表明要?jiǎng)h除該元素的所有方法。

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

判斷是否含有某個(gè)樣式

hasClass()方法可以用來(lái)判斷元素中是否含有某個(gè)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);})

轉(zhuǎn)載于:https://www.cnblogs.com/yuyujuan/p/9410428.html

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。