HTML5新特性-元素的classList属性与应用
来源:互联网 发布:淘宝韩妆正品店铺推荐 编辑:程序博客网 时间:2024/06/05 16:08
在html5新增的classList之前, 操作元素的class用的是className这个属性,而如果要向jquery封装的hasClass, removeClass, addClass, toggleClass一样优雅的操作calssName, 在以前我们要对className封装处理,如下, 下面的代码你未必能看得懂运行流程,但应该能看懂功能部分,这几段函数是取自我录制的一套视频中,讲解DOM框架封装的一部分
1 gQuery.prototype.hasClass = function (obj, cName) { 2 // <div class="abc"> <div class="hello abc def"></div> <div class="hello def abc"></div> 3 return obj.className.match(new RegExp('(\\s|^)' + cName + '(\\s|$)')); 4 } 5 6 gQuery.prototype.addClass = function (cName) { 7 for (var i = 0; i < this.elements.length; i++) { 8 if (!this.hasClass(this.elements[i], cName)) { 9 // hello abc // abc10 this.elements[i].className += " " + cName;11 this.elements[i].className = this.trim(this.elements[i].className);12 }13 }14 return this;15 }16 17 gQuery.prototype.removeClass = function (cName) {18 for (var i = 0; i < this.elements.length; i++) {19 if (this.hasClass(this.elements[i], cName)) {20 var re = new RegExp('(\\s|^)' + cName + '(\\s|$)');21 this.elements[i].className = this.elements[i].className.replace(re, " ");22 this.elements[i].className = this.trim(this.elements[i].className);23 }24 }25 return this;26 }27 28 gQuery.prototype.toggleClass = function (cName) {29 for (var i = 0; i < this.elements.length; i++) {30 if (this.hasClass(this.elements[i], cName)) {31 this.removeClass(cName);32 } else {33 this.addClass(cName);34 }35 }36 return this;37 }
这里,我还写了一个独立的删除某个class的功能:
1 <div class="box1 box2 box3">this is a test string</div> 2 <input type="button" value="移除某个class"> 3 <script> 4 var oDiv = document.querySelector("div"), 5 classNames = '', 6 oBtn = document.querySelector("input"); 7 oBtn.onclick = function(){ 8 classNames = oDiv.className.split(/\s+/); 9 var pos = -1, i, len;10 for( i = 0, len = classNames.length; i < len; i++ ) {11 if( classNames[i] == 'box2' ) {12 pos = i;13 break;14 }15 }16 classNames.splice( i, 1 );17 oDiv.className = classNames.join( " " );18 }19 20 </script>
思路非常的简单,获取div元素中的所有class, 用split 按空格切割,就会得到[box1,box2,box3]这样的数组, 然后遍历判断,是否有box2这个class?
找到之后就把当前数组的索引记下来,最后再用splice把该class从数组删除得到[box1,box3] 然后把数组的每一项用join函数中的空格连接,再赋值
给元素的className.
而在html5中,每个元素都有classList这个属性, classList是一个类数组结构, 提供了4个操作class的方法: add,remove,toggle,contains,
看到这几个英文单词,你已经知道什么意思了吧,尤其对于使用过jquery的朋友
add( 添加class), remove( 删除class), toggle( 切换class) contains( 判断是否包含某个class )
1 <div class="box1 box2 box3">this is a test string</div> 2 <input type="button" value="添加class" > 3 <input type="button" value="移除class" > 4 <input type="button" value="切换class" > 5 <script> 6 var G = function (id) { return document.querySelector(id); } 7 var oBtnAdd = G('#btn-add'), 8 oBtnRemove = G('#btn-remove'), 9 oBtnToggle = G('#btn-toggle'),10 oBox = G('#box');11 oBtnAdd.onclick = function(){12 oBox.classList.add( 'box4' );13 }14 oBtnRemove.onclick = function(){15 if( oBox.classList.contains('box1') ) {16 oBox.classList.remove( 'box1' );17 }18 }19 oBtnToggle.onclick = function(){20 oBox.classList.toggle( 'box4' );21 }22 </script>
阅读全文
0 0
- HTML5新特性-元素的classList属性与应用
- HTML5新特性-元素的classList属性与应用
- HTML5实战与剖析之classList属性
- HTML5表单元素的新特性
- 给不支持classList的浏览器(ie9以及以下等)的元素添加classList属性
- HTML5-input元素新特性
- HTML5中与类相关的扩充classList
- HTML5与CSS3的新特性
- HTML5新特性及应用
- DOM对象的classList对象属性介绍与用法
- html5的新特性
- html5的新特性
- HTML5的新特性
- HTML5的新特性
- HTML5的新特性
- HTML5的新特性
- HTML5的新特性
- html5新增的元素与属性
- EXOPlayer简要学习及应用
- 大数据架构和模式(三)理解大数据解决方案的架构层
- 控制敌人数量及波数
- python的字符串
- 从尾到头打印链表
- HTML5新特性-元素的classList属性与应用
- shell:当你运行while true的时候,你实际在做什么?
- 动态申请二维数组
- java 处理收到的微信用户消息并给出回复 --文字类消息
- Java爬虫入门简介(二) —— Jsoup解析HTML页面
- 面向对象与集合的结合
- 1162: 循环移动(指针专题)
- BZOJ4542: [Hnoi2016]大数
- ADB命令ING