
对dom节点添加一个class
对dom节点移除一个class
1. 设置图标,我更推荐使用 iconSkin 方式,这个可以参考 Demo2. 针对节点增加 class 请利用 onNodeCreated 回调,捕获 DOM 创建完毕的回调,然后利用 zTree 的规则找到 treeNode.tId + "_a" 这样的 <a>标签,自行添加 class 就是了
classList属性返回元素的类名,它是一个DOMTokenList对象。相比较className来说,它的 *** 作更加简洁,类似于对数组的 *** 作。
通过控制台,我们可以看到,DOM元素的classList是一个DomTokenList对象,结构 类似 于数组:
不过classList在IE10以下,并不能支持classList。因此,来看看如何自己实现一个classList。
首先,我们知道 div,span等html标签,有一个共同的父类,就是HTMLElement
我们要在它上面,创建一个新的prototype。
首先我们想到了直接定义:
但是这样会有个问题,就是通过prototype定义属性,属性的值是共享的。因此当我们给myDiv的newClassList.push的时候,也改变了mySpan,这显然不符合我们的要求。
因此,我们可以采用Object.defineProperty这个方法,来实现,给我们的HTMLElement定义属性。
为什么要把这个属性变成类数组呢?是因为我们既要让它拥有数组的特性,也要可以有自己的方法,就是add(),remove(),toggle(),contains()...
接下来我们,写一个构造器。
然后我们再在构造器里添加方法,因为prototype定义的方法是共享的,所以在这里可以使用。
我们给构造器里创建了几个 *** 作类数组的方法,因为这个实例是类数组对象,所以我们可以直接通过[].join.call(this," ")[].push.call(this,class)调用数组的方法。
那么我们现在可以直接使用 myDiv.neCLassList.add("classB") 等方法了,但是这样仅仅是改变了这个属性的value,如何通知并改变DOM的classname呢?
很简单,我们在构造器里监听一下。
至此,我们就完成了classList的构造,要修改dom的class,直接使用myDiv.newClassList.add('classB')。。。就可以实现。
欢迎分享,转载请注明来源:内存溢出
微信扫一扫
支付宝扫一扫
评论列表(0条)