前端Vue: ElementUI 源码分析之dom.js样式操作的封装
栏目: JavaScript · 发布时间: 5年前
内容简介:使用 classList 是替代element.className作为空格分隔的字符串访问元素的类列表的一种方便的方法element.classsList /className 实练有助于理解哦
elementUI 中对dom样式的操作,使用了Web API接口中对element 对象的 1.classList属性/className属性/contains等属性; 复制代码
科普:
Element.classList 是一个只读属性,返回一个元素的类属性的实时DOMTokenList 集合。 复制代码
使用 classList 是替代element.className作为空格分隔的字符串访问元素的类列表的一种方便的方法
方法:
add( String [, String] ) 添加指定的类值。如果这些类已经存在于元素的属性中,那么它们将被忽略。 remove( String [,String] ) 删除指定的类值。 item ( Number ) 按集合中的索引返回类值。 toggle ( String [, force] ) 当只有一个参数时:切换 class value; 即如果类存在,则删除它并返回false,如果不存在,则添加它并返回true。 当存在第二个参数时:如果第二个参数的计算结果为true,则添加指定的类值,如果计算结果为false,则删除它 contains( String ) 检查元素的类属性中是否存在指定的类值。 replace( oldClass, newClass ) 用一个新类替换已有类。 复制代码
hasClass()
/** 判断element标签对象是否包含某一个类; */ /* istanbul ignore next */ export function hasClass(el, cls) { if (!el || !cls) return false; if (cls.indexOf(' ') !== -1) throw new Error('className should not contain space.'); if (el.classList) { return el.classList.contains(cls); } else { return (' ' + el.className + ' ').indexOf(' ' + cls + ' ') > -1; } }; 复制代码
addClass()
/* istanbul ignore next 向一个element 标签对象中添加一个类 */ export function addClass(el, cls) { if (!el) return; var curClass = el.className; var classes = (cls || '').split(' '); for (var i = 0, j = classes.length; i < j; i++) { var clsName = classes[i]; if (!clsName) continue; if (el.classList) { el.classList.add(clsName); } else if (!hasClass(el, clsName)) { curClass += ' ' + clsName; } } if (!el.classList) { el.className = curClass; } }; 复制代码
removeClass()
/** 移除一个element 标签对象的class ; */ /* istanbul ignore next */ export function removeClass(el, cls) { if (!el || !cls) return; var classes = cls.split(' '); var curClass = ' ' + el.className + ' '; for (var i = 0, j = classes.length; i < j; i++) { var clsName = classes[i]; if (!clsName) continue; if (el.classList) { el.classList.remove(clsName); } else if (hasClass(el, clsName)) { curClass = curClass.replace(' ' + clsName + ' ', ' '); } } if (!el.classList) { el.className = trim(curClass); } }; 复制代码
element.classsList /className 实练有助于理解哦
chrome console: var dom =document.getElementById("datatable") dom.classList DOMTokenList(3) ["barhide-x", "p-scrollbar", "bar-y", value: "barhide-x p-scrollbar bar-y"]0: "barhide-x"1: "p-scrollbar"2: "bar-y"length: 3value: "barhide-x p-scrollbar bar-y"] __proto__: DOMTokenList dom.className "barhide-x p-scrollbar bar-y" dom.classList.remove("bar-y"); dom.classList DOMTokenList(2) ["barhide-x", "p-scrollbar", value: "barhide-x p-scrollbar"]0: "barhide-x"1: "p-scrollbar"length: 2value: "barhide-x p-scrollbar"__proto__: DOMTokenList dom.classList.remove("p-scrollbar"); dom.classList.remove("barhide-x"); dom.classList DOMTokenList [value: ""]length: 0value: ""__proto__: DOMTokenList dom.className "" 复制代码
以上所述就是小编给大家介绍的《前端Vue: ElementUI 源码分析之dom.js样式操作的封装》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!
猜你喜欢:- axios封装以及前端接口处理策略
- 前端对API接口的封装和管理
- 重学前端(8)封装ajax,http,跨域问题
- Spring Boot + Vue 前后端分离开发,前端网络请求封装与配置
- 封装JDBC—非框架开发必备的封装类
- SpringBlade 2.3.2 发布,增加 OSS 封装及单元测试封装
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
PYTHON3:数据分析与机器学习实战
龙马高新教育 / 北京大学出版社 / 2018-9-1 / 69.00
机器学习(Machine Learning, ML)是一门多领域交叉学科,是人工智能的核心,其应用遍及人工智能的各个领域,专门研究计算机怎样模拟或实现人类的学习行为,以获取新的知识或技能,重新组织已有的知识结构使之不断改善自身的性能。在机器学习过程中,需要使用大量数据,而数据分析是指用适当的方法对收集的大量数据进行分析,提取有用信息并形成结论,进而对数据加以详细研究和概括总结的过程。本书结合机器学......一起来看看 《PYTHON3:数据分析与机器学习实战》 这本书的介绍吧!