使用 JavaScript 更改元素的类

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

答案

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

不幸的是，这些在 v10 之前的 Internet Explorer 中不起作用，尽管有一个垫片可以在 IE8 和 IE9 中添加对它的支持，可以从这个页面获得。但是，它越来越受到支持。

简单的跨浏览器解决方案

选择元素的标准 JavaScript 方法是使用document.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标志会根据需要告知 replace 重复。

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

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

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

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

虽然可以直接在 HTML 事件属性中编写 JavaScript（例如onclick="this.className+=' MyClass'" ），但这不是推荐的行为。特别是在较大的应用程序上，通过将 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 库（尽管还有其他值得研究的）。

（注意， $ here 是 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);

你也可以这样做：

document.getElementById('id').classList.add('class');
document.getElementById('id').classList.remove('class');

并切换一个类（如果存在则删除，否则添加它）：

document.getElementById('id').classList.toggle('class');

在我没有使用 jQuery 的一个旧项目中，我构建了以下函数来添加，删除和检查元素是否具有类：

function hasClass(ele, cls) {
    return ele.className.match(new RegExp('(\\s|^)' + cls + '(\\s|$)'));
}
function addClass(ele, cls) {
    if (!hasClass(ele, cls)) ele.className += " " + cls;
}
function removeClass(ele, cls) {
    if (hasClass(ele, cls)) {
        var reg = new RegExp('(\\s|^)' + cls + '(\\s|$)');
        ele.className = ele.className.replace(reg, ' ');
    }
}

所以，例如，如果我想 onclick 添加一些类，我可以使用这个按钮：

<script type="text/javascript">
    function changeClass(btn, cls) {
        if(!hasClass(btn, cls)) {
            addClass(btn, cls);
        }
    }
</script>
...
<button onclick="changeClass(this, "someClass")">My Button</button>

到目前为止，肯定会更好地使用 jQuery。