本文目录一览:
- 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');
}
};