classList的使用,原生js对class的添加,删除,修改等方法的总结,以及兼容操作

时间: 2017-11-01阅读: 5053标签: js知识

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

 IEChrome  FirefoxSafari  Opera
 10.0+ 8.0+ 3.6+ 5.1+ 11.5+

获取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|$)") ); 
};






站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

链接: http://www.fly63.com/article/detial/42

TS与JS中的Getters和Setter究竟有什么用?

在本文中,我们讨论了getter 和 setter 在现代 Web 开发中的实用性。它们有用吗?什么时候使用它们是有意义的?尽管我不同意 getter 和 setter 完全是一个反模式。但它们在几种情况下能带来更多的实用性。

44道JS难题

国外某网站给出了44道JS难题,这些题涉及面非常广,涵盖JS原型、函数细节、强制转换、闭包等知识,而且都是非常细节的东西,透过这些小细节可以折射出很多高级的JS知识点。

javascript中什么是句柄?

一个句柄是指使用的一个唯一的整数值,即一个4字节(64位程序中为8字节)长的数值,来标识应用程序中的不同对象和同类中的不同的实例。

原生js获取当前周数

通过原生Js根据日期获取对应日期的周数,例如今天是2018-01-01那么获取该日期在这一年的周数就为1,有需要的朋友可以参考下。

js判断是否为IE浏览器的多种方法总汇

这篇文章主要整理通过js来判断浏览器是否为IE的多种方法。使用js脚本判断浏览器是否为ie,这里分享六种判断是否为ie的方法,有需要的朋友参考学习下。

js词法作用域和作用域的理解_什么是javascript词法作用域?

JavaScript引擎在代码执行前会对其进行编译:第一步编译阶段,第二步运行阶段。词法作用域:定义在词法阶段的作用域,即书写代码时函数声明的位置决定的。词法分析器处理代码时会保持作用域不变

javascript的Object. hasOwnProperty方法

hasOwnProperty() 方法会返回一个布尔值,指示对象自身属性中(非继承属性)是否具有指定的属性,如果 object 具有带指定名称的属性,则 hasOwnProperty 方法返回 true,否则返回 false。

js原型链,Javascript重温OOP之原型与原型链

js的原型链,得出了一个看似很简单的结论。对于一个对象上属性的查找是递归的。查找属性会从自身属性(OwnProperty)找起,如果不存在,就查看prototype中的存在不存在。

JavaScript中的特殊运算,一些有趣的js等式

JavaScript中的特殊运算,字符,true,false参与运算结果会怎么样?打开控制台。这会允许你再你的浏览器里输入下面所有的代码,所以你可以实时的看到发生什么了。

前端与编译原理——用JS写一个JS解释器

说起编译原理,印象往往只停留在本科时那些枯燥的课程和晦涩的概念。作为前端开发者,编译原理似乎离我们很远,对它的理解很可能仅仅局限于“抽象语法树(AST)”。但这仅仅是个开头而已。编译原理的使用,甚至能让我们利用JS直接写一个能运行JS代码的解释器。

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!