使用 JavaScript 更改 HTML 元素的類

1. 在 JavaScript 中選擇 HTML 元素
2. 在 JavaScript 中改變適用於一個元素的所有類別
3. 在 JavaScript 中的元素中插入一個額外的類
4. 在 JavaScript 中刪除元素中的類
5. JavaScript 中檢查元素中是否使用了某個類

本文演示瞭如何響應 JavaScript 事件而更改 HTML 元素的類。

在 JavaScript 中選擇 HTML 元素

毫無疑問，在 JavaScript 中選擇 HTML 元素的最簡單方法是通過 document.getElementById()。

例如，如果你需要選擇班級 ID 為 Students 的元素，請按以下步驟進行選擇。

document.getElementById('Students')

在 JavaScript 中改變適用於一個元素的所有類別

使用元素的類 ID 選擇元素後，可以更改其類或替換其所有類，如上所示。你將需要使用 .className 屬性設定一個新值，以替換舊的類，如下所示。

Document.getElementById('Fruits').classname = 'Veggies';

在 JavaScript 中的元素中插入一個額外的類

你也可以在不更改任何現有類的情況下將新類新增到元素。你可以通過使用 += 運算子來新增新類來實現。

例如，

Document.getElementById('Subjects').className += 'Physics';

它將一個名為 Physics 的額外類新增到 Subjects 元素中的其他類。

在 JavaScript 中刪除元素中的類

在不影響其他類的情況下刪除元素中的單個類稍微複雜一些。你將需要將 .className.replace 與以下正規表示式一起使用。

?:^|\s)RemoveThis(?!\S)/g

• ?:^|\s 捕獲字串的開頭和/或使用的任何單個空格字元。
• RemoveThis 是要刪除的類的名稱。
• (?!\S) 驗證 RemoveThis 是完整的類名，並在末尾檢查是否有任何非空格字元。換句話說，它確保將正規表示式放在字串的末尾。
• g 是確保在新增類的所有情況下都根據需要執行替換命令的標誌。

示例如下。

document.getElementById('ElementOne').className =
    document.getElementById('ElementOne')
        .className.replace(/(?:^|\s)RemoveThis(?!\S)/g, '')

JavaScript 中檢查元素中是否使用了某個類

要檢查是否已將類應用於特定元素，可以使用上面的 regex。最好使用 if(); 實現宣告以給出結果。例如：

if (document.getElementById('ElementOne')
        .className.match(/(?:^|\s)ClassOne(?!\S)/))
print('Class has been used.')

如果檢查結果為肯定，則輸出將為 Class has been used；如果結果為否，則輸出將為無輸出，除非使用 else 語句定義了替代操作或輸出。

不建議直接在 HTML 事件屬性中編寫 JavaScript 程式碼。這可能會使執行和降低應用程式速度變得更加困難。相反，你可以在函式中編寫 JavaScript，在 onclick 屬性中呼叫該函式，然後將事件從 HTML 程式碼移至 JavaScript。你可以使用 .addEventListener() 屬性來實現。