在javascript中添加和刪除對象

Question

我很確定我有這個權利，但是嘗試在我的javascript代碼中使用兩個單獨的方法添加和刪除。

第一個，是專門試圖將classStr添加到HTML元素對象el，屬性爲className。如果它已經包含classStr，那麼它就被單獨留下。

var addClass = function addClass(el, classStr) { 
    if(el.className !== classStr) { 
     el.className = classStr; 
    } 
}; 

這一次，我想簡單地刪除classNameclassStr不留空格。 el是一個元素對象。我不確定的唯一的事情是，如果我離開白色空間。

var removeClasfunction = function removeClass(el, classStr) { 
    delete el.className; 
}; 

Answer 1

你的函數的主要缺點是它們不能處理對象上的多個類名。另外，你並不是真的想要刪除屬性名稱，只是在沒有類名時將其設置爲空字符串。

下面是一組用於管理類名的實用程序函數，當一個對象上存在多個類名時，這些函數的作用是您應該計劃的（您不知道的）。這些不會累積任何額外的空白：

function addClass(elem, cls) { 
    if (!hasClass(elem, cls)) { 
     var oldCls = elem.className; 
     if (oldCls) { 
      oldCls += " "; 
     } 
     elem.className = oldCls + cls; 
    } 
} 

function removeClass(elem, cls) { 
    var str = " " + elem.className + " "; 
    elem.className = str.replace(" " + cls + " ", " ").replace(/^\s+|\s+$/g, ""); 
} 

function hasClass(elem, cls) { 
    var str = " " + elem.className + " "; 
    var testCls = " " + cls + " "; 
    return(str.indexOf(testCls) !== -1) ; 
} 

function toggleClass(elem, cls) { 
    if (hasClass(elem, cls)) { 
     removeClass(elem, cls); 
    } else { 
     addClass(elem, cls); 
    } 
}