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

分配点击事件：

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

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