使用JavaScript怎么动态添加和删除类
本篇文章为大家展示了使用JavaScript怎么动态添加和删除类,内容简明扼要并且容易理解,绝对能使你眼前一亮,通过这篇文章的详细介绍希望你能有所收获。
红河网站制作公司哪家好,找创新互联!从网页设计、网站建设、微信开发、APP开发、响应式网站设计等网站项目制作,到程序开发,运营维护。创新互联成立与2013年到现在10年的时间,我们拥有了丰富的建站经验和运维经验,来保证我们的工作的顺利进行。专注于网站建设就选创新互联。
首先等到一个 dom 对象(也叫dom元素), 通过document.getElement……的几种方法得到
如`
let element = document.getElementById("box");
1.通过类名, 获取类名: el.className, 赋值: el.className = "className" 会覆盖掉原来的类
2.通过属性,获取类名: el.getAttribute("class"); 赋值: el.setAttribute("class", "className1 className2"); 会覆盖掉原来的类
3.通过属性节点 attributeNode(性能差一点,但能兼容ie,getAttribute() ie 的有些版本不支持 )setAttributeNode() 方法向元素中添加指定的属性节点。
如果这个指定的属性已存在,则此方法会替换它。,获取类名: getAttributeNode("class").value, 赋值:
let attr = document.createAttribute("class"); attr.nodeValue = "className"; el.setAttributeNode(attr)
4.通过 classList属性, 获取类名 el.classList; 追加类名: el.classList.add("className"); 删除类 : el.calssList.remove("className");
上边四种方法, classList最灵活,最好好用, 但是不支持 ie9 以下的浏览器, 兼容性要差一些
代码如下:
html
按钮1