首页 > Web开发 > 详细

HTML5新特性:元素的classList属性与应用

时间:2017-08-24 12:16:47      阅读:297      评论:0      收藏:0      [点我收藏+]

在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   // abc
10             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 id="box" class="box1 box2 box3">this is a test string</div>
 2     <input type="button" value="添加class" id="btn-add">
 3     <input type="button" value="移除class" id="btn-remove">
 4     <input type="button" value="切换class" id="btn-toggle">
 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>

 

HTML5新特性:元素的classList属性与应用

原文:http://www.cnblogs.com/ghostwu/p/7422169.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!