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

编程问答

DOM操作之属性和样式操作

发布时间：2025/7/25 编程问答 69 豆豆

生活随笔收集整理的这篇文章主要介绍了 DOM操作之属性和样式操作小编觉得挺不错的,现在分享给大家,帮大家做个参考.

在DOM操作，除了前面的节点操作以外，常常被用到的操作还有属性操作和节点操作，下面，主要来总结一下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操作之属性和样式操作的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。