如何在 JavaScript 中動態管理元素類別？

如何使用 JavaScript 動態變更元素的類別？

用於類別操作的現代 HTML5 技術

現代瀏覽器支援classList屬性，它提供了方便的方法來添加、刪除或切換類，而無需外部庫：

document.getElementById("MyElement").classList.add('MyClass');
document.getElementById("MyElement").classList.remove('MyClass');
if ( document.getElementById("MyElement").classList.contains('MyClass') )
document.getElementById("MyElement").classList.toggle('MyClass');

跨瀏覽器解決方案

更改所有類

要將所有現有類別替換為新類，請使用className:

document.getElementById("MyElement").className = "MyClass";

新增額外的類別

附加空格和新類別名稱：

document.getElementById("MyElement").className += " MyClass";

刪除類別

使用正規表示式替換：

document.getElementById("MyElement").className =
document.getElementById("MyElement").className.replace(/(?:^|\s)MyClass(?!\S)/g , '');

檢查如果應用了一個類別

if ( document.getElementById("MyElement").className.match(/(?:^|\s)MyClass(?!\S)/) )

事件處理

您可以透過以下方式將這些操作分配給onclick 或其他事件：

• 呼叫onClick 屬性中的函數：

<button onClick="changeClass()"></button>

• 在中使用addEventListener >

JavaScript框架和函式庫

document.getElementById("MyElement").addEventListener('click', changeClass);

框架和函式庫簡化了這些任務，例如 jQuery：

以上是如何在 JavaScript 中動態管理元素類別？的詳細內容。更多資訊請關注PHP中文網其他相關文章！