JavaScript更改class和id的方法

2024-05-06 14:17:01

字體：大中小

來源：轉載

供稿：網友

是className，可不是class

注意JavaScript使用的是className去訪問class屬性，因為class是一個保留關鍵字，因為將來JavaScript可能開始支持像Java一樣的類。

我們在討論style屬性時遇到了棘手的細節問題和瀏覽器差異性帶來的麻煩，正如同經歷一場驚濤駭浪。而class和id的更改則像是沙漠里一片平靜的綠洲，瀏覽器們在這里和諧相處。思考這個例子：

p {

color: #000000; /* black */

}

p.emphasis {

color: #cc0000; /* red */

}

<p id="test">Test</p>

最初，該段落沒有定義class，所以它的字體顏色是黑色。不過，一行JavaScript就足以改變它的樣式：

document.getElementById('test').className = 'emphasis';

瞬間文字變成了紅色。如果想要改變回來，你可以按如下操作：

document.getElementById('test').className = '';

你移除了樣式，該段落恢復到默認的p{}規則。

對于一個實際應用中的例子，看看“限長的文本輸入區”。計數器有這樣的結構和呈現樣式（該結構由JavaScript動態生成，不過那不影響這個例子）：

<div class="counter"><span>12</span>/1250</div>

div.counter {

font-size: 80%;

padding-left: 10px;

}

span.toomuch {

font-weight: 600;

color: #cc0000;

}

當腳本發現用戶輸入的文字一定達到了最大長度，它修改作為計數器的<span>的class為toomuch：

[限長的文本輸入區，第20～23行]

if (currentLength > maxLength)

this.relatedElement.className = 'toomuch';

else

this.relatedElement.className = '';

現在，作為計數器的<span>字體變成粗體和紅色。

id的變更以幾乎完全一樣的方式工作：

p {

color: #000000; /* black */

}

p#emphasis {

color: #cc0000; /* red */

}

<p>Test</p>

document.getElementsByTagName('p')[0].id = 'emphasis';

該段落的文字再次變成了紅色。但是，我建議你不要過多改變id。除了作為CSS的鉤子，它們也常常作為JavaScript的鉤子，改變它們可能存在不確定的副作用。

增加class

通常，你不會給一個元素的class設置新值，而只是添加一個class。因為你不希望移除元素已經擁有的任何樣式。因為CSS允許復合樣式，新class所包含的樣式被添加到元素上，不會移除任何已經存在的class的CSS指令。

“表單驗證”中的writeError()和removeError()函數是一個很好的例子。一般來說我會給表單域應用好幾個class，因為圖形設計師經常對輸入框使用兩個甚至三個寬度。當一個表單域包含錯誤的時候，我希望添加一個特別的警告樣式，但我不希望攪亂該元素已經擁有的樣式。所以，我不能簡單地覆蓋舊的class值，那樣我將失去已經指定的寬度。

上一篇：javascript TextArea動態顯示剩余字符

下一篇：javascript得到XML某節點的子節點個數的腳本