首页 > 编程知识 正文

js的classlist的简单介绍

时间:2023-12-09 14:12:26 阅读:313526 作者:PTFR

本文目录一览:

  • 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');

    }

};

版权声明:该文观点仅代表作者本人。处理文章:请发送邮件至 三1五14八八95#扣扣.com 举报,一经查实,本站将立刻删除。