classList是一个domTokenList的对象，用于在对class元素的添加，删除，以及判断是否存在等操作。但是classList的使用存在一定的浏览器兼容，即使web app在android中使用，也需要系统为3.0+才支持，这里整理一下关于classList的兼容情况：

获取classList

<div class="a b c" id="demo"></div>
<script>
var demo=document.getElementById("demo").classList;
console.log(demo)
</script>

输入如下：

添加add()  

demo.add("style");

删除remove()

demo.remove("style");

包含contains()

var is=demo.contains("style");
console.log(is);//返回false

其他属性：

demo.length;//获取class的个数-1
demo.item(0);//获取第一个类名

原生通过正则对class的操作  

添加

function addClass( elements,cName ){ 
  if( !hasClass( elements,cName ) ){ 
    elements.className += " " + cName; 
  }; 
};

删除

function removeClass( elements,cName ){ 
  if( hasClass( elements,cName ) ){ 
    elements.className = elements.className.replace( new RegExp( "(\\s|^)" + cName + "(\\s|$)" ), " " );
  }; 
};

是否存在

function hasClass( elements,cName ){ 
  return !!elements.className.match( new RegExp( "(\\s|^)" + cName + "(\\s|$)") ); 
};

本文内容仅供个人学习/研究/参考使用，不构成任何决策建议或专业指导。分享/转载时请标明原文来源，同时请勿将内容用于商业售卖、虚假宣传等非学习用途哦～感谢您的理解与支持！

链接: https://fly63.com/article/detial/42