html改变元素的类,如何用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');

不幸的是，这些在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 characterMyClass  # 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事件属性(例如οnclick="this.className+=' MyClass'")中编写JavaScript，但这不是推荐的行为。特别是在较大的应用程序上，通过将HTML标记与JavaScript交互逻辑分离，可以实现更易维护的代码。

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

function changeClass(){

// Code examples from above

}...My Button

(不需要在脚本标记中包含此代码，这仅仅是为了简洁示例，并且在不同的文件中包含JavaScript可能更合适。)

第二步是将onclick事件从HTML移到JavaScript中，例如使用addEventListener

function changeClass(){

// Code examples from above

}

window.onload = function(){

document.getElementById("MyElement").addEventListener( 'click', changeClass);

}...My Button

(请注意，window.onload部分是必需的，以便在HTML加载完成后执行该函数的内容- 如果没有这个，调用JavaScript代码时MyElement可能不存在，因此该行将失败。)

JavaScript框架和库

上面的代码都是标准的JavaScript，但通常的做法是使用框架或库来简化常见任务，以及从编写代码时可能没有想到的修复错误和边缘情况中获益。

虽然有些人认为添加一个~50 KB的框架来简单地改变一个类是不合适的，如果你正在做大量的JavaScript工作，或者任何可能有不寻常的跨浏览器行为的东西，那么值得考虑。

(非常粗略地说，库是为特定任务设计的一组工具，而框架通常包含多个库并执行一整套职责。)

上面的示例已经使用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);