使用 JavaScript 更改 HTML 元素的類
Valentine Kagwiria
2023年1月30日
2021年4月29日
- 在 JavaScript 中選擇 HTML 元素
- 在 JavaScript 中改變適用於一個元素的所有類別
- 在 JavaScript 中的元素中插入一個額外的類
- 在 JavaScript 中刪除元素中的類
- 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()
屬性來實現。