signed

QiShunwang

“诚信为本、客户至上”

分别使用原生js和jQuery添加/删除元素的class属性

2021/4/26 22:18:22   来源:

一、原生js添加/删除元素的class属性:

复制代码

<!-- span元素原有class = "test" -->
<span class="test"></span>

// 获取元素
var ele = document.getElementsByClassName("abc");


// 方法1:直接赋值,会覆盖原有的值
ele.className = "test1";

<!-- class原本属性值test被test1覆盖 -->
<span class="test1"></span>


// 方法2:利用className为字符串的属性,可在原有class属性值后面添加或删除新的值
ele.className += " test2";

<!-- 添加class属性值test2 -->
<span class="test1 test2"></span>


// 方法3:利用classList属性的add()、remove()方法添加或删除属性值
ele.classList.add("test3");

<!-- 添加class属性值test3 -->
<span class="test1 test2 test3"></span>

复制代码

 

二、jQuery添加/删除元素的属性

复制代码

<!-- span元素原有class = "test" -->
<span class="test"></span>


// addClass() 添加类属性值test1、test2
$("span").addClass("test1 test2");


// removeClass() 删除类属性值
$("span").removeClass("test");


// toggleClass("demo1")  切换类属性值(有/无),常用于事件触发,触发一次添加属性值,再触发一次删除属性值
$("span").toggleClass("test3");  

复制代码