使用JS實作jQuery的addClass, removeClass, hasClass函數功能_javascript技巧

廢話不多說，直接上程式碼

複製程式碼 程式碼如下:

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              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轉換成陣列.
    x = 0;
    for(x in obj_class_lst) {
        if(obj_class_lst[x] == cls) {//循環陣列, 判斷是否包含cls
            return true;
        }
    }
    return false;
}