美文网首页
原生js添加事件,添加类名,删除类名

原生js添加事件,添加类名,删除类名

作者: wylb868 | 来源:发表于2022-02-15 11:44 被阅读0次

下面是一段鼠标移上为当前元素添加类名,并删除其他兄弟节点的类名的代码

//要添加效果的元素
var classObj = document.getElementsByClassName('sec3-item');
//循环元素并添加事件
  for(i=0;i<classObj.length;i++){ 
    classObj[i].addEventListener('mouseenter', function($el){
      //其他节点删除act类
      siblingsRomoveClassAct($el.target, 'act')
      //当前节点添加act类名
      $el.target.className += ' act';
    },true)
  }

  function siblingsRomoveClassAct($el, className){
    var nodeList = $el.parentNode.children; //父级的子节点
    for(var i=0; i<nodeList.length; i++){
      //判断是否元素节点 且不是本身  移除要删除的类
      if(nodeList[i].nodeType == 1 && nodeList[i] != $el) {
        var reg = new RegExp('(\\s|^)' + className + '(\\s|$)');
        nodeList[i].className = nodeList[i].className.replace(reg, ' ');  //移除要删除的类
      }
    }
  }

相关文章

网友评论

      本文标题:原生js添加事件,添加类名,删除类名

      本文链接:https://www.haomeiwen.com/subject/kjoklrtx.html