本文目录一览：
- 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’);
}
};
原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/300888.html
微信扫一扫 
支付宝扫一扫 