js的classlist的简单介绍

更新：2022-11-11 04:33

本文目录一览：

1、js中classlist怎么使用
2、javascript中classlist的问题
3、JS之classList对象
4、原生js判断某个元素是否有指定的class名的几种方法
5、如何对js添加的类进行操作？

js中classlist怎么使用

前，jQuery的hasClass、addClass、removeClass我们已经再熟悉不过了，然而我们并不会在每一个项目中都会去使用jQuery或者Zepto，譬如在移动端的网页中，考虑到传说中的性能和静态资源的请求量等因素，我们通常会选择采用原生js，而对于元素的class操作。

javascript中classlist的问题

先价检查 rotaGroup[k] 是否是HTML dom 对象 然后检查 浏览器是否支持

JS之classList对象

相比将 element.className 作为以空格分隔的字符串来使用，classList 是一种更方便的访问元素的类列表的方法。

原生js判断某个元素是否有指定的class名的几种方法

//第一种方法，用classList这个H5 API，有兼容性问题
if(p[i].classList.contains('test') == true){
    console.log(p[i].innerHTML);
}

//第二种方法，用className这个属性
if(p[i].className == 'test'){
    console.log(p[i].innerHTML)
}

//第三种方法，用getAttribute()这个方法
if(p[i].getAttribute("class") == 'test'){
    console.log(p[i].innerHTML);
}

以上三种可以任选，条件是不考虑兼容性和多个class名的情况。

如何对js添加的类进行操作？

因为.manage2样式是在事件中添加到#manage元素的，第二段代码执行时该元素尚未被赋予.manage2样式，所以获取不到这个元素也没添加有效的事件。 看你这段代码，.manage1、.manage2应该都是id为manage的元素， 首先能用ID获取就不要用样式获取，因为ID获取元素的效率最快。 其次，同一元素多次被使用时，用变量暂存。 代码更改如下，如果不对，请上传相应的HTML：

var box = document.getElementById('box'),
    boxClassList = box.classList,
    manage = document.getElementById('manage'),
    manageClassList = manage.classList;
manage.onclick = function(){
    manageClassList.remove('manage1');
    manageClassList.add('manage2');
    boxClassList.add('addr-add');
    manage.onclick = function(){
        boxClassList.remove('addr-add');
        boxClassList.add('addr-delete');
    }
};