美文网首页
dom.classList

dom.classList

作者: forLovn | 来源:发表于2016-09-25 11:40 被阅读0次

    今天逛贴吧无意中发现classList的新属性,
    classList是className的升级版,
    问:classList的给我们带来的什么?
    答:1:我们可以方便的实现对Dom的class属性进行操作(增加,修改,删除)了;
    2:添加此节点已经存在的类名会自动过滤

    具体代码如下:

    js 代码:
    window.onload=function () {   
       var tDom=document.getElementById("testD"); 
       if(tDom.className==tDom.classList.toString()){        
            console.log(JSON.stringify(tDom.classList)); 
        }    
      var _domClassList=tDom.classList;  
          _domClassList.adds("d2 d3 d2 d4");
       //添加多个属性自己扩展!
       //此时dom渲染的class值并已经改变; 
       console.log(_domClassList.contains("d"));//true 是否存在d 类名;    
       _domClassList.remove("d"); //删除   
       console.log(_domClassList.item(1));//获取
      //** if visible is set remove it, otherwise add it
      _domClassList.toggle("visible");
    };
    <!--扩展一个adds 一次可以添加多个class 不会添加已经存在的类-->
    DOMTokenList.prototype.adds = function(tokens) {   
           tokens.split(" ").forEach(function(token) {  
              this.add(token);   
           }.bind(this));  
            return this;
    };
    
    html:
    <div id="testD" class="a b c">hello! classList</div>
    

    相关文章

      网友评论

          本文标题:dom.classList

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