標籤:classlist html5新特性
在html5新增的classList之前, 操作元素的class用的是className這個屬性,而如果要向jquery封裝的hasClass, removeClass, addClass, toggleClass一樣優雅的操作calssName, 在以前我們要對className封裝處理,如下, 下面的代碼你未必能看得懂運行流程,但應該能看懂功能部分,這幾段函數是取自我錄製的一套視頻中,講解DOM架構封裝的一部分
gQuery.prototype.hasClass = function (obj, cName) { // <div class="abc"> <div class="hello abc def"></div> <div class="hello def abc"></div> return obj.className.match(new RegExp(‘(\\s|^)‘ + cName + ‘(\\s|$)‘));}gQuery.prototype.addClass = function (cName) { for (var i = 0; i < this.elements.length; i++) { if (!this.hasClass(this.elements[i], cName)) { // hello abc // abc this.elements[i].className += " " + cName; this.elements[i].className = this.trim(this.elements[i].className); } } return this;}gQuery.prototype.removeClass = function (cName) { for (var i = 0; i < this.elements.length; i++) { if (this.hasClass(this.elements[i], cName)) { var re = new RegExp(‘(\\s|^)‘ + cName + ‘(\\s|$)‘); this.elements[i].className = this.elements[i].className.replace(re, " "); this.elements[i].className = this.trim(this.elements[i].className); } } return this;}gQuery.prototype.toggleClass = function (cName) { for (var i = 0; i < this.elements.length; i++) { if (this.hasClass(this.elements[i], cName)) { this.removeClass(cName); } else { this.addClass(cName); } } return this;}
這裡,我還寫了一個獨立的刪除某個class的功能:
<div class="box1 box2 box3">this is a test string</div> <input type="button" value="移除某個class"> <script> var oDiv = document.querySelector("div"), classNames = ‘‘, oBtn = document.querySelector("input"); oBtn.onclick = function(){ classNames = oDiv.className.split(/\s+/); var pos = -1, i, len; for( i = 0, len = classNames.length; i < len; i++ ) { if( classNames[i] == ‘box2‘ ) { pos = i; break; } } classNames.splice( i, 1 ); oDiv.className = classNames.join( " " ); } </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 )
<div id="box" class="box1 box2 box3">this is a test string</div> <input type="button" value="添加class" id="btn-add"> <input type="button" value="移除class" id="btn-remove"> <input type="button" value="切換class" id="btn-toggle"> <script> var G = function (id) { return document.querySelector(id); } var oBtnAdd = G(‘#btn-add‘), oBtnRemove = G(‘#btn-remove‘), oBtnToggle = G(‘#btn-toggle‘), oBox = G(‘#box‘); oBtnAdd.onclick = function(){ oBox.classList.add( ‘box4‘ ); } oBtnRemove.onclick = function(){ if( oBox.classList.contains(‘box1‘) ) { oBox.classList.remove( ‘box1‘ ); } } oBtnToggle.onclick = function(){ oBox.classList.toggle( ‘box4‘ ); } </script>
本文出自 “ghostwu” 部落格,請務必保留此出處http://ghostwu.blog.51cto.com/11192807/1958991
HTML5新特性:元素的classList屬性與應用