原生js實(shí)現(xiàn)addClass,removeClass,hasClass方法
本文分為兩部分進(jìn)行講解,具體內(nèi)容如下
第一部分:原生js實(shí)現(xiàn)addClass,removeClass,hasClass方法
function hasClass(elem, cls) { cls = cls || ''; if (cls.replace(/\s/g, '').length == 0) return false; //當(dāng)cls沒(méi)有參數(shù)時(shí),返回false return new RegExp(' ' + cls + ' ').test(' ' + elem.className + ' '); } function addClass(ele, cls) { if (!hasClass(elem, cls)) { ele.className = ele.className == '' ? cls : ele.className + ' ' + cls; } } function removeClass(ele, cls) { if (hasClass(elem, cls)) { var newClass = ' ' + elem.className.replace(/[\t\r\n]/g, '') + ' '; while (newClass.indexOf(' ' + cls + ' ') >= 0) { newClass = newClass.replace(' ' + cls + ' ', ' '); } elem.className = newClass.replace(/^\s+|\s+$/g, ''); } }
第二部分:使用原生JS實(shí)現(xiàn)jQuery的addClass, removeClass, hasClass函數(shù)功能
function addClass(obj, cls){ var obj_class = obj.className,//獲取 class 內(nèi)容. blank = (obj_class != '') ? ' ' : '';//判斷獲取到的 class 是否為空, 如果不為空在前面加個(gè)'空格'. added = obj_class + blank + cls;//組合原來(lái)的 class 和需要添加的 class. obj.className = added;//替換原來(lái)的 class. } function removeClass(obj, cls){ var obj_class = ' '+obj.className+' ';//獲取 class 內(nèi)容, 并在首尾各加一個(gè)空格. ex) 'abc bcd' -> ' abc bcd ' obj_class = obj_class.replace(/(\s+)/gi, ' '),//將多余的空字符替換成一個(gè)空格. ex) ' abc bcd ' -> ' abc bcd ' removed = obj_class.replace(' '+cls+' ', ' ');//在原來(lái)的 class 替換掉首尾加了空格的 class. ex) ' abc bcd ' -> 'bcd ' removed = removed.replace(/(^\s+)|(\s+$)/g, '');//去掉首尾空格. ex) 'bcd ' -> 'bcd' obj.className = removed;//替換原來(lái)的 class. } function hasClass(obj, cls){ var obj_class = obj.className,//獲取 class 內(nèi)容. obj_class_lst = obj_class.split(/\s+/);//通過(guò)split空字符將cls轉(zhuǎn)換成數(shù)組. x = 0; for(x in obj_class_lst) { if(obj_class_lst[x] == cls) {//循環(huán)數(shù)組, 判斷是否包含cls return true; } } return false; }
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家學(xué)習(xí)javascript程序設(shè)計(jì)有所幫助。
- js中設(shè)置元素class的三種方法小結(jié)
- 用原生JS獲取CLASS對(duì)象(很簡(jiǎn)單實(shí)用)
- js獲取class的所有元素
- JavaScript更改class和id的方法
- js實(shí)現(xiàn)class樣式的修改、添加及刪除的方法
- js獲取某元素的class里面的css屬性值代碼
- js判斷樣式className同時(shí)增加class或刪除class
- javaScript給元素添加多個(gè)class的簡(jiǎn)單實(shí)現(xiàn)
- vue.js入門(mén)教程之綁定class和style樣式
- 深入理解JavaScript和TypeScript中的class
相關(guān)文章
一起來(lái)看看JavaScript數(shù)據(jù)類(lèi)型最詳解
這篇文章主要為大家詳細(xì)介紹了JavaScript數(shù)據(jù)類(lèi)型,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下,希望能夠給你帶來(lái)幫助2022-01-01Js 獲取HTML DOM節(jié)點(diǎn)元素的方法小結(jié)
在Web應(yīng)用程序特別是Web2.0程序開(kāi)發(fā)中,經(jīng)常要獲取頁(yè)面中某個(gè)元素,然后更新該元素的樣式、內(nèi)容等。2009-04-04谷歌Chrome瀏覽器擴(kuò)展程序開(kāi)發(fā)小記
本文給大家記錄的是一次谷歌Chrome瀏覽器擴(kuò)展程序的開(kāi)發(fā)過(guò)程,非常的細(xì)致,有類(lèi)似開(kāi)發(fā)念頭的小伙伴們可以來(lái)參考下2016-01-01javascript實(shí)現(xiàn)瀑布流自適應(yīng)遇到的問(wèn)題及解決方案
這篇文章主要介紹了javascript實(shí)現(xiàn)瀑布流自適應(yīng)遇到的問(wèn)題及解決方案,需要的朋友可以參考下2015-01-01詳解小程序毫秒級(jí)倒計(jì)時(shí)(適用于拼團(tuán)秒殺功能)
這篇文章主要介紹了小程序毫秒級(jí)倒計(jì)時(shí),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05