问题

如何使用JavaScript更改HTML元素类以响应onclick事件?

  最佳答案

改变类的现代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中不起作用,尽管有一个 shim 向IE8和IE9添加支持,可以从这个页面.但是,越来越多的支持.

简单的交叉浏览器解决方案

选择元素的标准JavaScript方法是使用 document.getElementById("Id") ,这是以下示例使用的 – 当然可以以其他方式获取元素,在正确的情况下可以简单地使用this – 但是,详细讨论这超出了答案的范围.

要更改元素的所有类:

为了用一个或多个新类替换所有现有类,设置类Name属性:

 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 复制,可能是最常用的JavaScript库(虽然还有其他值得调查).

(请注意,这里的$是jQuery对象.)

使用jQuery更改类:

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

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

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

此外,jQuery提供了一个快捷方式,用于在不适用的情况下添加类,或删除执行以下操作的类:

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


使用jQuery将函数分配给单击事件:

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

或者,在不需要id的情况下:

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


  相同标签的其他问题

javascripthtmldom