如何使用JavaScript更改元素的类

Question

如何onclick使用JavaScript 响应事件来更改HTML元素的类？

Answer 1

更改类的现代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');

不幸的是，尽管有一些垫片可以将其支持添加到IE8和IE9中，但这些功能在v10之前的InternetExplorer中无法使用，可从此页面获得。但是，它越来越受到支持。

简单的跨浏览器解决方案

选择元素的标准JavaScript方法是usingdocument.getElementById("Id")，这是以下示例所使用的-
您当然可以以其他方式获得元素，并且在正确的情况下可以简单地使用它this-但是，对此的详细讨论已超出了范围的答案。

更改元素的所有类：

要将所有现有类替换为一个或多个新类，请设置className属性：

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

（您可以使用以空格分隔的列表来应用多个类。）

要将附加类添加到元素：

要将类添加到元素中而不删除/影响现有值，请添加空格和新的类名，如下所示：

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

要从元素中删除类：

要在元素中删除单个类而又不影响其他潜在类，则需要简单的正则表达式替换：

document.getElementById("MyElement").className =
   document.getElementById("MyElement").className.replace
      ( /(?:^|\s)MyClass(?!\S)/g , '' )
/* Code wrapped for readability - above is all one statement */

此正则表达式的解释如下：

(?:^|\s) # Match the start of the string, or any single whitespace character

MyClass  # The literal text for the classname to remove

(?!\S)   # Negative lookahead to verify the above is the whole classname
         # Ensures there is no non-space character following
         # (i.e. must be end of string or a space)

如果g已多次添加类名，则该标志指示替换根据需要重复。

要检查类是否已应用于元素：

上面用于删除类的正则表达式也可以用作检查特定类是否存在的检查：

if ( document.getElementById("MyElement").className.match(/(?:^|\s)MyClass(?!\S)/) )

将这些操作分配给onclick事件：

尽管可以直接在HTML事件属性（例如onclick="this.className+='MyClass'"）内编写JavaScript，但不建议这样做。特别是在较大的应用程序上，通过将HTML标记与JavaScript交互逻辑分开，可以实现更具可维护性的代码。

实现此目的的第一步是创建一个函数，然后在onclick属性中调用该函数，例如：

<script type="text/javascript">
    function changeClass(){
        // Code examples from above
    }
</script>
...
<button onclick="changeClass()">My Button</button>

（不需要在脚本标签中包含此代码，这只是为了简化示例，将JavaScript包含在不同的文件中可能更合适。）

第二步是将onclick事件移出HTML并移入JavaScript，例如使用addEventListener

<script type="text/javascript">
    function changeClass(){
        // Code examples from above
    }

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

（请注意，需要window.onload部分，以便在HTML加载完成后执行该函数的内容-否则，在调用JavaScript代码时MyElement可能不存在，因此该行将失败。）

JavaScript框架和库

上面的代码全部使用标准JavaScript，但是通常的做法是使用框架或库来简化常见任务，并受益于在编写代码时可能不会想到的固定错误和边缘情况。

尽管有些人认为添加一个约50
KB的框架来简单地更改类是过大的，但是，如果您正在做大量的JavaScript工作，或者可能有不寻常的跨浏览器行为，则值得考虑。

（大致来说，库是为特定任务而设计的一组工具，而框架通常包含多个库并执行一整套职责。）

上面的示例已在下面使用jQuery进行了复制，而jQuery可能是最常用的JavaScript库（尽管还有其他值得研究的地方）。

（请注意，$这里是jQuery对象。）

使用jQuery更改类：

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

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

if ( $('#MyElement').hasClass('MyClass') )

此外，jQuery提供了一种捷径，用于添加不适用的类，或删除适用的类：

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

使用jQuery将功能分配给click事件：

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

或者，不需要ID：

$(':button:contains(My Button)').click(changeClass);