向元素添加類屬性有助於開發人員在網頁上創建動態用戶體驗。當一個類屬性被添加到一個元素時,該選定的元素將採用與該類名稱相關聯的樣式。
通過單擊按鈕來考慮用戶。單擊按鈕時,我們希望網頁的一部分根據我們的 CSS 樣式表進行更改。您可以為元素分配與此樣式關聯的類名,以在單擊按鈕後更改其外觀。
創建交互式體驗在所有前端編程中都很重要。在本指南中,我們將探索兩種在純 JavaScript 中將類名添加到選定元素的方法。最終,您將能夠在您的項目中使用此工具。
如何使用 JavaScript 添加類
在 JavaScript 中,添加類名可以通過兩種方式完成。首先,我們將選擇所需的 HTML 元素。然後我們可以選擇使用 className 或 add()
屬性將類的名稱添加到元素中。我們將在下一節中介紹語法並使用它。
請記住,我們在這裡使用的是簡單的 JavaScript。不需要庫。由於我們經常使用 JavaScript,將上述邏輯包裝在一個函數中並將該函數傳遞給事件處理程序是一種常見的做法。這將確保添加類名的功能僅在特定事件發生後發生。
對於 HTML 元素,它們可以有多個類名。這有助於記住我們可以將類名添加到已經具有其他類名或 ID 的元素。我們需要記住的是樣式與我們項目中的類名稱相關聯,並將名稱添加到我們要應用樣式的元素中。