使用JS實現(xiàn)jQuery的addClass, removeClass, hasClass函數(shù)功能
更新時間:2014年10月31日 10:35:12 投稿:hebedich
這篇文章主要介紹了使用JS實現(xiàn)jQuery的addClass, removeClass, hasClass函數(shù)功能,需要的朋友可以參考下
廢話不多說,直接上代碼
復制代碼 代碼如下:
function addClass(obj, cls){
var obj_class = obj.className,//獲取 class 內容.
blank = (obj_class != '') ? ' ' : '';//判斷獲取到的 class 是否為空, 如果不為空在前面加個'空格'.
added = obj_class + blank + cls;//組合原來的 class 和需要添加的 class.
obj.className = added;//替換原來的 class.
}
function removeClass(obj, cls){
var obj_class = ' '+obj.className+' ';//獲取 class 內容, 并在首尾各加一個空格. ex) 'abc bcd' -> ' abc bcd '
obj_class = obj_class.replace(/(\s+)/gi, ' '),//將多余的空字符替換成一個空格. ex) ' abc bcd ' -> ' abc bcd '
removed = obj_class.replace(' '+cls+' ', ' ');//在原來的 class 替換掉首尾加了空格的 class. ex) ' abc bcd ' -> 'bcd '
removed = removed.replace(/(^\s+)|(\s+$)/g, '');//去掉首尾空格. ex) 'bcd ' -> 'bcd'
obj.className = removed;//替換原來的 class.
}
function hasClass(obj, cls){
var obj_class = obj.className,//獲取 class 內容.
obj_class_lst = obj_class.split(/\s+/);//通過split空字符將cls轉換成數(shù)組.
x = 0;
for(x in obj_class_lst) {
if(obj_class_lst[x] == cls) {//循環(huán)數(shù)組, 判斷是否包含cls
return true;
}
}
return false;
}
您可能感興趣的文章:
- jQuery使用addClass()方法給元素添加多個class樣式
- jQuery中addClass()方法用法實例
- Jquery.addClass始終無效原因分析
- jQuery源碼解讀之a(chǎn)ddClass()方法分析
- jQuery中removeClass()方法用法實例
- jQuery使用removeClass方法刪除元素指定Class的方法
- jQuery源碼解讀之removeClass()方法分析
- jQuery中toggleClass()方法用法實例
- jQuery使用toggleClass方法動態(tài)添加刪除Class樣式的方法
- 用jQuery toggleClass 實現(xiàn)鼠標移上變色
- JQuery使用屬性addClass、removeClass和toggleClass實現(xiàn)增加和刪除類操作示例
相關文章
用apply讓javascript函數(shù)僅執(zhí)行一次的代碼
有時候我們只想要讓某些腳步函數(shù)執(zhí)行一次就算完成任務了。如何實現(xiàn)這種功能呢?簡單模仿下面這段就可以輕松搞定了2010-06-06