详解原⽣JS动态添加和删除类
由于需要，给按钮组监听点击事件(要求⽤事件委托)，当有⼀个按钮被点击时，相应的给该按钮添加⼀个类(激活类)，其他没有点击的按钮就要移出该类
添加和和删除类有三种⽅法
⾸先等到⼀个 dom 对象(也叫dom元素)，通过Element……的⼏种⽅法得到
如`
let element = ElementById("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 = ateAttribute("class");
el.setAttributeNode(attr)
4.通过 classList属性，获取类名 el.classList; 追加类名： el.classList.add("className"); 删除类：
ve("className");
上边四种⽅法， classList最灵活，最好好⽤，但是不⽀持 ie9 以下的浏览器，兼容性要差⼀些
代码如下：
html
<div id="btn-group">
<div class="btn btn-active">按钮1</div>
<div class="btn">按钮2</div>
<div class="btn">按钮3</div>
<div class="btn">按钮4</div>
</div>
js代码，其中⽤到了ES6语法（⽤ES6写简洁）
let myEventUtil = {
// 添加监听事件
addEvent (element, type, handler) {
if (element.addEventListener) {
element.addEventListener(type, handler, false);
} else if (element.attach){ // ie
element.attach("on"+ type, handler);
} else {
element['on' + type] = handler;
}
},
getTarget (event) {
let event = event || window.event;
return event.target || event.srcElement;
}
}
let my$ = id => ElementById(id);
getattribute方法返回类型
let btnGroup = my$(“btn-group”);
myEventUtil.addEvent(btnGroup, 'on', function (ev) {
// 给所有的 btn 都移除激活的类 btn-active
// console.log(this) ==> 是⼀个dom元素 btnGroup
// 可以通过 el.children[i]拿到具体的⼦元素
// 拿到⼦元素了可以通过 ve("className") 删除类
// el.classList.add("className") 来添加类
// 删除类
let len = this.children.length;
for (let i = 0; i < len; i ++) {
this.children[i].ve("btn-active");
/
/ this.children[i].className = "btn"; // ⽤其中⼀个就⾏
}
// 添加类, 拿到具体的 btn 给它添加类
// Target(ev).className = "btn"; // ⽤其中⼀个就⾏
});
以上所述是⼩编给⼤家介绍的原⽣JS动态添加和删除类详解整合，希望对⼤家有所帮助，如果⼤家有任何疑问请给我留⾔，⼩编会及时回复⼤家的。在此也⾮常感谢⼤家对⽹站的⽀持！

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。