classList介绍和原生JavaScript实现addClass、removeClass等

geekzhou 发布于2019-08-26 18:18 / 2564人阅读

摘要：使用可以给元素很方便的添加和删除等操作，现在原生的也可以实现这个方法了。删除指定的类值。所以目前来看，还是无法在实际中放心的使用，只能用于某些特定的项目等。不过我们可以通过一些来实现，或者最下方给出的原生实现。

使用jQuery可以给元素很方便的添加class和删除class等操作，现在原生的JavaScript也可以实现这个方法了。使用classList可以方便的添加class、删除class、查询class等。

语法：

let elementClass = element.classList;

elementClasses 是一个 DOMTokenList 表示 element 的类属性。如果类属性未设置或为空，那么 elementClasses.length 返回 0。element.classList 本身是只读的，虽然你可以使用 add() 和 remove() 方法修改它。

方法：

add( String [, String] )

添加指定的类值。如果这些类已经存在于元素的属性中，那么它们将被忽略。

remove( String [,String] )

删除指定的类值。

item ( Number )

按集合中的索引返回类值。

toggle ( String [, force] )

当只有一个参数时：切换 class value; 即如果类存在，则删除它并返回false，如果不存在，则添加它并返回true。
当存在第二个参数时：如果第二个参数的计算结果为true，则添加指定的类值，如果计算结果为false，则删除它

contains( String )

检查元素的类属性中是否存在指定的类值。

示例：

// div是具有class =“foo bar”的元素的对象引用
div.classList.remove("foo");
div.classList.add("anotherclass");

// 如果visible被设置则删除它，否则添加它
div.classList.toggle("visible");

// 添加/删除 visible，取决于测试条件，i小于10
div.classList.toggle("visible", i < 10);

alert(div.classList.contains("foo"));

//添加或删除多个类
div.classList.add("foo","bar");
div.classList.remove("foo", "bar");

兼容性：

不兼容Android2.3和iOS4.2的，在移动端上想使用也是有点头疼啊。IE系列的更别说IE9和IE8了。所以目前来看，还是无法在实际中放心的使用，只能用于某些特定的项目等。不过我们可以通过一些shim来实现，或者最下方给出的原生javascript实现。

跨浏览器javascript shim

https://github.com/eligrey/cl...

原生JavaScript

类似于jQuery库的使用方式，使用className通过正则来添加或者删除class。
addClass、removeClass、toggleClass、hasClass

function hasClass(obj, cls) { 
 return obj.className.match(new RegExp("(s|^)" + cls + "(s|$)")); 
} 
 
function addClass(obj, cls) { 
 if (!this.hasClass(obj, cls)) obj.className += " " + cls; 
} 
 
function removeClass(obj, cls) { 
 if (hasClass(obj, cls)) { 
 var reg = new RegExp("(s|^)" + cls + "(s|$)"); 
 obj.className = obj.className.replace(reg, " "); 
 } 
} 
 
function toggleClass(obj,cls){ 
 if(hasClass(obj,cls)){ 
 removeClass(obj, cls); 
 }else{ 
 addClass(obj, cls); 
 } 
}

参考链接：
https://blog.csdn.net/leadn/a...

云服务器 GPU云服务器原生js实现addclass 原生javascript javascript原生原生js实现

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/110167.html

原生JavaScript实现hasClass、addClass、removeClass、toggle

摘要：兼容，因不支持和，分别用实现支持。支持明细代码让低版本支持让低版本支持支持实现方式修复不规范传参是否有必要判断不支持实现方式完整代码修复不规范传参支持是否有必要判断使用项目兼容IE6+，因IE6、IE7、IE8不支持Array.prototype.indexOf()和String.prototype.trim()，分别用Polyfill实现支持。详细： index...

brianway 2019-08-20 10:21 评论0 收藏0
那些原生JavaScript

摘要：最近在用写页面，当然了在移动里引入或这些框架，肯定是极不理性的。原生挺简单，为何需要的成功当时是因为这些浏览器不兼容，让开发者崩溃，而且上浏览器性能好，跨平台兼容也不影响性能。但根本就不是为手机设计的。最近在用mui写页面，当然了在移动App里引入jq或zepto这些框架，肯定是极不理性的。原生JS挺简单，为何需要jq？jq的成功当时是因为ie6、7、8、9、10、chrome、ff...

fantix 2019-08-26 11:29 评论0 收藏0
放弃jQuery, 使用原生js

摘要：随着的逐渐淘汰，的兴起，以及侧重点放在了移动端，可能变的不在那么重要，原生一样很好用。下面介绍几个原生替换的方法。随着IE6、7、8的逐渐淘汰，HTML5的兴起，以及侧重点放在了移动端，jQuery可能变的不在那么重要，原生一样很好用。下面介绍几个原生替换jq的方法。获取元素 //jQuery $(.xxx); //class获取 $(#xxx); //id获取 $(....

mumumu 2019-08-23 14:27 评论0 收藏0
忘掉jQuery，使用JavaScript原生API

摘要：以下是和实现相同操作的等价代码选择元素函数法调用创建元素添加事件监听器设置获取属性添加移除切换类附加内容克隆元素移除元素获取父元素上一个下一个元素或这些只是很少的一部分，不能等到哪一天变成只会用了，以下是jQuery和JavaScript实现相同操作的等价代码选择元素 //jQuery var ele = $(.ele); //javascript var ele = docum...

lidashuang 2019-08-19 17:12 评论0 收藏0
如何忘却jQuery，开始使用JavaScript原生API

摘要：就在这里随时等候你的召唤，但是也许你还没有准备好如何使用他。但是我想讨论的是如果仅为使用个选择器或者类似的东西，是否真的有必要加载。假设咱不是为了简化，每个人用是因为它支持，动画处理和选择器函数。 JavaScript就在这里随时等候你的召唤，但是也许你还没有准备好如何使用他。为什么不用jQuery呢？因为他很慢并且你的网站真的不需要这些多余的负担。我不是来这里争辩原生API和函数...

Rindia 2019-08-19 14:25 评论0 收藏0