如何高效操作 JavaScript 元素類別？

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');

跨瀏覽器解決方案

對於缺少 classList 的瀏覽器，請使用以下方法：

取代所有類別

設定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事件

將這些操作包裝在函數中並調用它們來自事件處理程序：

function changeClass() {
  // Code examples from above
}
document.getElementById("MyElement").addEventListener('click', changeClass);

JavaScript 框架和庫

jQuery 等框架簡化了類別操作：

$('#MyElement').addClass('MyClass');
$('#MyElement').removeClass('MyClass');
if ($('#MyElement').hasClass('MyClass'))
$('#MyElement').click(changeClass);

以上是如何高效操作 JavaScript 元素類別？的詳細內容。更多資訊請關注PHP中文網其他相關文章！