JS之ClassName屬性使用

一、style與className屬性的對比

在前面的style屬性學習中,知道了通過style屬性可以控制元素的樣式,從而實現了行為層通過DOM的style屬性去干預變現層顯示的目地,但是這種就是不好的,而且為了實現通過DOM腳本設置的樣式，你就不得不花時間去研究JavaScript函數,去尋找對應修改和設置樣式的有關語句。而且每添加或修改js腳本的代碼量遠大於我們修改css樣式的代碼量。

所以與其使用DOM直接改變某個元素的樣式,不如通過JavaScript代碼去更新這個元素的class屬性。

下面通過代碼來比較這兩種方式的差別:

function setStyleHeaderSiblings() {
    if (!checkCompatibility()) return; //check compatibility
    var heads = document.getElementsByTagName("h1");
    var ele;  //defines a element for receive;
    for (var i = 0; i < heads.length; i++) {
        ele = getNextElement(heads[i].nextSibling);
        ele.style.fontWeight = "bold";
        ele.style.fontSize = "1.2em";
    }
}

function setStyleHeaderSiblings() {
    if (!checkCompatibility()) return; //check compatibility
    var heads = document.getElementsByTagName("h1");
    var ele;  //defines a element for receive;
    for (var i = 0; i < heads.length; i++) {
        ele = getNextElement(heads[i].nextSibling);
        ele.className="change";
    }

css樣式表
.change{
font-weight:bold;
font-size:1.2em;
}

假設我們這個需要給這個效果加上一個

上面這種做法需要在js里面加如下代碼:

ele.style.backgroundColor="blue";

而第二種做法則只要在樣式表里加一個樣式就可以實現,而且實現了樣式與行為的分離,還減少了我們的代碼量,所以在后期需求不確定的情況下,我建議第二種方法來動態的修改元素的樣式。

二、追加class類名

但是通過className設置元素的樣式也有一個缺陷,那就是通過className設置元素的class屬性時將替換(而不是追加)該元素原有的class屬性,在實際開發中往往很多時候我們需要追加class；

所以根據這個需要我們可以自定義一個方法來實現追加className的效果代碼如下:

function addClass(element,value) {
    if (!element.className) {
        element.className = value;
    } else {
        newClassName = element.className;
        newClassName += " "; //這句代碼追加的類名分開
        newClassName += value;
        element.className = newClassName;
    }
}