JS JQuery添加、替换、删除元素class属性

1、先声明一个div和两个class样式，用来测试：

<html><head><meta charset="utf-8"><title></title><script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script><style>.back{background: red;}.col{color: aqua;}</style></head><body><div id="div1">我是div</div></body>
</html>

一、使用JQuery操作元素属性：

下面是获取或设置元素的DOM属性的方法，我只挑出一些和操作class属性相关的写一些小demo，其余的自己直接看教程就行了：https://www.w3school.com.cn/jquery/jquery_ref_attributes.asp

方法	描述
addClass()	向匹配的元素添加指定的类名。
attr()	设置或返回匹配元素的属性和值。
hasClass()	检查匹配的元素是否拥有指定的类。
html()	设置或返回匹配的元素集合中的 HTML 内容。
removeAttr()	从所有匹配的元素中移除指定的属性。
removeClass()	从所有匹配的元素中删除全部或者指定的类。
toggleClass()	从匹配的元素中添加或删除一个类。
val()	设置或返回匹配元素的值。

1、首先使用attr()和prop()方法修改元素的class属性：

1）单独使用attr()：

<script>window.onload=function(){$("#div1").attr("class","col");}
</script>

效果：

2）单独使用prop()：

<script>window.onload=function(){$("#div1").prop("class","back");}
</script>

效果：

3）同时使用attr()和prop()：

<script>window.onload=function(){$("#div1").prop("class","back");}
</script>

效果：

说明：通过上面的效果可以看出，通过attr()和prop()方法都可以为元素添加class属性，但是attr()和prop()是为元素添加新的class属性的同时，将原来的class属性全部清空（也就是覆盖之前的属性）。

2、addClass()：

<script>window.onload=function(){$("#div1").attr("class","col");$("#div1").addClass("back");}
</script>

效果：

说明：addclass()可以为元素添加class属性，并且元素本身的class属性不会受到影响。

3、hasClass()：

<script>window.onload=function(){$("#div1").attr("class","col");console.log($("#div1").hasClass("col"));}
</script>

效果：

说明：判断某元素是否有某个class。

4、removeClass()：

<script>window.onload=function(){$("#div1").attr("class","col");$("#div1").removeClass("col");}
</script>

效果：

说明：将元素的某个class属性移除。

5、toggleClass()：

这个我就不测试了，就是如果元素中有这个class属性，那么就将class删除，如果没有该class属性，则将这个class添加。

二、使用JavaScript对元素的class属性进行操作：

1、添加class属性值：

window.onload=function(){document.getElementById('div1').className='col';document.getElementById('div1').className='back';
}

说明：上面这种方式和直接使用attr()和prop()一样，虽然会为元素添加一个class属性，但是会将之前所有的class属性覆盖掉。

效果：

2、添加class属性值：

window.onload=function(){document.getElementById('div1').className='col';document.getElementById('div1').className +=' back';    //属性值back前有一个空格
}

说明：如果不想将之前的class属性值覆盖掉，那么将上面的代码进行简单的修改即可。（注意：+= 后面需要留一个空格）

效果：

3、添加class属性值：

window.onload=function(){document.getElementById('div1').className='col';document.getElementById('div1').classList.add('back');    //此处没有空格
}

说明：这种方法也是比较好用的，直接为元素添加一个class属性值，之前的不会覆盖。（注意：这里属性值后面没有空格）

效果：

4、删除class属性值：

window.onload=function(){document.getElementById('div1').className='col';document.getElementById('div1').className +=' back';document.getElementById('div1').classList.remove("col");
}

说明：将某元素的很多class属性值中将其中一个属性值删除。

效果：

三、使用getAttribute()和setAttribute()方法来操作class属性：

1、可以使用getAttribute()来获取某元素的class属性。

<script>window.onload=function(){document.getElementById('div1').classList.add('back');console.log(document.getElementById('div1').getAttribute("class"));}
</script>

效果：正常打印输出back

2、添加class属性：

<script>window.onload=function(){document.getElementById('div1').classList.add("back");var classVal = document.getElementById('div1').getAttribute("class");classVal = classVal.concat(" col");document.getElementById('div1').setAttribute("class",classVal);}
</script>

说明：首先使用getAttribute()方法获取到class属性值（这里要保证之前就有一个class属性，如果没有的话获取到的值会是null，使用null调用concat方法会出现错误），然后使用concat()方法进行拼接，然后再使用setAttribute()方法，将拼接好的属性值赋值到元素class属性上。

效果：

3、替换class属性：

在之前的css的基础上再添加一个css：（修改字体颜色为黄色）

.yellow{color: yellow;
}

<script>window.onload=function(){document.getElementById('div1').classList.add("yellow");document.getElementById('div1').classList.add("back");var classVal = document.getElementById('div1').getAttribute("class");console.log(classVal);classVal = classVal.replace("yellow","col");console.log(classVal);document.getElementById('div1').setAttribute("class",classVal);}
</script>

说明：我们首先为元素添加两个css属性，一个红色的背景一个黄色的字体，然后使用getAttribute()获取到该元素的class属性值，再使用replace将其中某一个属性进行替换（我们这里将yellow替换为col），最后将替换之后的class属性值使用setAttribute()赋值给元素。

下面是控制台打印的文字：

效果：（已经将黄色字体替换掉了）

4、删除class属性值：

<script>window.onload=function(){document.getElementById('div1').classList.add("yellow");document.getElementById('div1').classList.add("back");var classVal = document.getElementById('div1').getAttribute("class");console.log(classVal);classVal = classVal.replace("yellow","");console.log(classVal);document.getElementById('div1').setAttribute("class",classVal);}
</script>

说明：删除和替换实现原理相同，只不过是将要替换的属性值设置为空字符串""即可实现删除。

控制台打印：

效果：将黄色字体效果删除了

你要去做一个大人，不要回头，不要难过。

“其实生活在井里也挺好的，就是偶尔，会觉得世界很空，生活很咸。”

JS JQuery添加、替换、删除元素class属性相关推荐

jQuery添加、删除元素
jQuery添加元素: prepend()在头部添加,添加的内容在被选标签的内部 append()在尾部添加,添加的内容在被选标签的内部 before()在头部天际,添加的内容在被选标签的外部 aft ...
jQuery 学习-样式篇（四）：jQuery 设置和删除元素的属性
推荐阅读 Helm3(K8S 资源对象管理工具)视频教程:https://edu.csdn.net/course/detail/32506 Helm3(K8S 资源对象管理工具)博客专栏:https: ...
用js实现添加和删除元素的功能
一.实现效果二.HTML.CSS.JS代码 <!doctype html> <html> <head><meta charset="utf-8&q ...
js动态添加修改删除元素
事件委托:e.target 核心:1.通过事件冒泡给子元素添加事件,控制新生成的元素进行操作 2.减少DOM元素操作,只需要绑定一个父元素就可以,不用循环遍历每一个子元素进行绑定事件操作,提高程序性能 ...
html添加删除元素属性,jquery怎么删除元素的属性？
jquery怎么删除元素的属性?下面本篇文章给大家介绍一下.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 在jquery中,可以使用removeAttr()方法来删除元素的属性.r ...
js进阶 9-11 select选项框如何动态添加和删除元素
js进阶 9-11 select选项框如何动态添加和删除元素一.总结一句话总结: 二.js进阶 9-11 select选项框如何动态添加和删除元素 1.案例说明 2.相关知识 Select 下拉列 ...
js添加和删除元素节点
js添加和删除元素节点 <!DOCTYPE html> <html> <head><meta charset="UTF-8">< ...
jQuery中添加与删除元素
我们可以使用jQuery方便的添加或删除元素. 1.使用jQuery生成新元素,生成新元素的方法,比如,我要生成一个有序列表的标签,只需要: var ol = $('<ol></ol ...
html中js添加或删除activex,JS：操作样式表2 :用JS实现添加和删除一个类名的功能（addClass()和removeClass()）...
var box = document.getElementById("box"); box.id = "pox"; 将id = "box", ...
python列表增加一行_Python 列表中的修改、添加和删除元素的实现
本文介绍的是列表中的修改.添加和删除元素.第一次写博客,如果本文有什么错误,还请大家评论指正.谢谢! 创建的列表大多数都将是动态的,这就意味着列表创建后,将随着程序的运行删减元素. 修改列表元素修改 ...

JS JQuery添加、替换、删除元素class属性

JS JQuery添加、替换、删除元素class属性相关推荐

最新文章

热门文章