使用 JavaScript 更改 HTML 元素的類

Valentine Kagwiria 2023年1月30日 2021年4月29日
  1. 在 JavaScript 中選擇 HTML 元素
  2. 在 JavaScript 中改變適用於一個元素的所有類別
  3. 在 JavaScript 中的元素中插入一個額外的類
  4. 在 JavaScript 中刪除元素中的類
  5. JavaScript 中檢查元素中是否使用了某個類
使用 JavaScript 更改 HTML 元素的類

本文演示瞭如何響應 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() 屬性來實現。