1、addClass:为指定的dom元素添加样式。
2、removeClass:删除指定dom元素的样式。
3、toggleClass:如果存在(不存在)，就删除(添加)一个样式。
4、hasClass:判断样式是否存在。
原生 JS 代码如下：
function hasClass(obj, cls) {return obj.className.match(new RegExp('(\\s|^)' + cls + '(\\s|$)'))
}
function addClass(obj, cls) {
if (!this.hasClass(obj, cls)) {
obj.className += " " + cls
}
}
function removeClass(obj, cls) {
if (hasClass(obj, cls)) {
var reg = new RegExp('(\\s|^)' + cls + '(\\s|$)')
obj.className = obj.className.replace(reg, ' ')
}
}
function toggleClass(obj,cls){
if(hasClass(obj,cls)){
removeClass(obj, cls)
} else {
addClass(obj, cls)
}
}
js通过class属性删除节点用法实现：比如有test.html，div的结构如下：
<div class="columns" id="columns">
<div class="column"><input type="checkbox" name="col_list[]" value="cows">cows</div>
<div class="column"><input type="checkbox" name="col_list[]" value="cows">cows</div>
<div class="column"><input type="checkbox" name="col_list[]" value="cows">cows</div>
<div class="column"><input type="checkbox" name="col_list[]" value="cows">cows</div>
<div name="columnClear" class="contentClear" id="columnClear"></div>
</div>
可以通过class属性来删除指定的节点：
js常用方法：element.parentNode.removeChild(element)
或者直接定义删除的js方法：
function removeElementsByClass(className){
var elements = document.getElementsByClassName(className)
while(elements.length >0){
elements[0].parentNode.removeChild(elements[0])
}
}
这样只要传入class名，就可以删除这个class相关的子节点了。
document.getElementById("myDIV").className
document.getElementById("myDIV").className.indexOf('firstClass')
或者
document.getElementById("myDIV").classList.contains('firstClass')
document.getElementById("myDIV").classList.add("firstClass")
document.getElementById("myDIV").classList.add("firstClass", "secondClass", "thirdClass")
document.getElementById("myDIV").classList.remove("firstClass")
document.getElementById("myDIV").classList.remove("firstClass", "secondClass", "thirdClass")
