实现DOM classList的add、remove、toggle

偏执的太偏执、 2021-12-14 06:15 245阅读 0赞

function MyClassList(classes, dom){
    	[].push.apply(this, classes)
    	Object.defineProperty(this, "__value__", {
    		enumerable: false,
    		set: function(val){
    			dom.className = val;
    		}
    	})
    }
    MyClassList.prototype = {
    	addClass: function addClass(cls){	
    		if(!this.contains(cls)){
    			[].push.call(this, cls)
    		}
    		this.__value__ = [].join.call(this, " ")
    	},
    	removeClass: function removeClass(cls){
    		if(this.contains(cls)){
    			for(var i=0;i<this.length;i++){
    				if(this[i] === cls){
    					[].splice.call(this, i, 1)
    					return cls;
    				}
    			}
    			this.__value__ = [].join.call(this, " ")
    		}
    	},
    	toggleClass: function toggleClass(cls){
    		this.contains(cls) ? this.removeClass(cls) : this.addClass(cls);
    		this.__value__ = [].join.call(this, " ")
    	},
    	contains: function contains(cls){
    		return [].includes.call(this, cls)
    	}
    }
    Object.defineProperty(HTMLElement.prototype, "myClassList", {
      get: function(){
    	if(!this.__classList__){
    		this.__classList__ = new MyClassList(this.className.split(/\s+/),this)
    	}
    	return this.__classList__;
      }
    });

div id="myDiv" class="a b c"></div>

myDiv.myClassList.addClass("d")	
    myDiv.myClassList.removeClass("b")			
    myDiv.myClassList.toggleClass("E")

![822800-20190510162734568-813418944.png][]

转载于:https://www.cnblogs.com/vmumu/p/10845180.html

[822800-20190510162734568-813418944.png]: /images/20211213/c8d171befc424cfa81b51c27f85bc052.png

发表评论取消回复

表情：

评论列表（有 0 条评论，245人围观）

还没有评论，来说两句吧...

相关阅读

相关 Js的classList实现导航简单的收起展开

![f139d78a75deca8b8f97a96a0c193ce0.png][] 使用Js的classList快速实现导航简单的收起展开 1 首先我们设置导航的的样式

清疚/ 2022年12月06日 04:13/ 0 赞/ 137 阅读

相关原生js操作元素类名—classList.add()、classList.remove()、classList.contains()、classList.toggle()

原生js操作元素类名 [classList.add( newClassName )；][classList.add_ newClassName] [class

悠悠/ 2022年11月22日 02:49/ 0 赞/ 160 阅读

相关使用HTML5的classList可以像jQuery一样去操作DOM节点的CSS类

① 在HTML5 API里，页面DOM里的每个节点上都有一个classList对象，程序员可以使用里面的方法新增、删除、修改节点上的CSS类。 ② 使用classList，我

分手后的思念是犯贱/ 2022年10月29日 06:27/ 0 赞/ 136 阅读

相关 classList详解，让你的js方便地操作DOM类

在此之前，jQuery的hasClass、addClass、removeClass我们已经再熟悉不过了，然而我们并不会在每一个项目中都会去使用jQuery或者Zepto，譬如在

我会带着你远行/ 2022年08月19日 13:17/ 0 赞/ 226 阅读

相关 classList属性的知识点整理

classLIst属性返回元素的类名，作为DOMTokenList对象该属性用于在元素中添加、移出、切换css类语法：elem.classList 方法： add(

比眉伴天荒/ 2022年05月20日 21:13/ 0 赞/ 185 阅读

相关 DOM classList 属性

<table> <tbody> <tr> <th>方法</th> <th>描述</th> </tr> <tr> <td>add(<

╰+攻爆jí腚メ/ 2022年05月09日 11:22/ 0 赞/ 202 阅读

相关实现DOM classList的add、remove、toggle

function MyClassList(classes, dom){ [].push.apply(this, classes) Object.de

偏执的太偏执、/ 2021年12月14日 06:15/ 0 赞/ 246 阅读

相关 HTML5-Classlist样式操作

[HTML5-Classlist样式操作][HTML5-Classlist] <!DOCTYPE html> <html lang="en"> <he

Bertha 。/ 2021年10月29日 17:42/ 0 赞/ 267 阅读

相关 JavaScript classList 属性

JavaScript classList 属性 classList 属性可以获取应用于指定元素上的样式类集合，HTML5新增。通过 HTML 元素的 class 属性...

小灰灰/ 2020年06月02日 14:08/ 0 赞/ 807 阅读

相关 classList与className 区别

classList与className 区别 HTML中绝大多数元素都具有 class 属性，利用它可以设置 CSS 样式类。 JavaScript 可以通过 clas...

小灰灰/ 2020年06月01日 16:23/ 0 赞/ 960 阅读