如何使用 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('MyClass');

跨浏览器解决方案

适用于更广泛的浏览器兼容性：

更改所有类

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

添加Class

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

删除类

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

检查类是否已应用

• 如果(document.getElementById("MyElement").className.match(/(?:^|s)MyClass(?!S)/))

为 onClick 事件分配操作

要分离 HTML 和 JavaScript，建议使用函数：

• HTML

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

• JavaScript

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

或者，使用 addEventListener:

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

JavaScript 框架和库

像 jQuery 这样的库简化了这些任务：

• 改变类

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

• 添加/删除类的快捷方式

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

• 为单击指定功能活动

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

以上是如何使用 JavaScript 更改元素的类？的详细内容。更多信息请关注PHP中文网其他相关文章！