如何使用 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事件的操作

避免在 HTML 屬性中使用內嵌 JavaScript。相反，建立一個函數並在 onClick 屬性中呼叫它：

<script>
  function changeClass() {
    // Action code
  }
</script>
<button onClick="changeClass()">My Button</button>

或使用 addEventListener：

<script>
  window.onload = function() {
    document.getElementById("MyElement").addEventListener('click', changeClass);
  }
</script>
<button>

JavaScript 框架和函式庫

jQuery 範例

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

切換類別：

$('#MyElement').toggleClass('MyClass');

分配點擊事件：

以上是如何使用 JavaScript 有效率地更改元素類別？的詳細內容。更多資訊請關注PHP中文網其他相關文章！