如何使用 JavaScript 更改元素的類別？

如何使用 JavaScript 更改元素的類別

回應 onclick 等各種事件，JavaScript 提供了多種更改 HTML 元素類別的技術。

現代 HTML5技術

對於支援 classList的現代瀏覽器，以下方法提供了一個簡單的方法：

• document.getElementById("MyElement").classList.add('MyClass');
• document.getElementById ("MyElement").classList.remove('MyClass ');
• 如果(document.getElementById("MyElement").classList.contains('MyClass'))
• document.getElementById("MyElement").classList.toggle('MyClassClass ');

跨瀏覽器解決方案

適用於更廣泛的瀏覽器相容性：

更改所有類別

• 更改所有類別

更改所有類別

• 更改所有類別

更改所有類別

• 更改所有類別

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

• 新增Class

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

刪除類別

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

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

• 檢查類別是否已套用
  如果(document.getElementById(" MyElement").className.match(/(?:^|s)MyClass(?!S)/))

  function changeClass() {
    // Code examples from above
  }

為onClick 事件分配操作

要分離HTML 和JavaScript，建議使用函數：

window.onload = function() {
    document.getElementById("MyElement").addEventListener('click', changeClass);
}

HTML

• HTML
  HTML

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

• JavaScript

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

• 或者，使用addEventListener:

  $('#MyElement').click(changeClass);

Java 框架和圖> 🎜>像jQuery這樣的函式庫簡化了這些任務： 改變類別新增/刪除類別的捷徑 為點選指定功能活動

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