一、原生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");