问题

如何使用JavaScript来响应 onClick 事件,更改HTML元素的类别?



解决方法

Adding and Removing Classes, with simple cross-browser JavaScript

标准JavaScript选择元素的方式是使用 文档.getElementById("Id") ,这是下面的例子使用 - 你当然可以以其他方式获取元素,在正确的情况下可以简单地使用 this 相反 - 但是,详细的这是超出了答案的范围.

To change all classes for an element:

要用一个或多个新类替换所有现有类,请设置className属性:

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

(您可以使用以空格分隔的列表应用多个类.)

To add an additional class to an element:

要向元素添加类,而不删除/影响现有值,请追加空格和新类名,如下所示:

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

To remove a class from an element:

要删除一个元素的类,而不影响其他潜在的类,需要一个简单的正则表达式替换:

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 标志告诉替换根据需要重复,以防类名被多次添加.

To check if a class is already applied to an element:

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

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


Assigning these actions to onclick events:

虽然可以直接在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 Frameworks and Libraries

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

虽然有些人认为添加一个〜50 KB的框架只是简单地更改一个类,如果你做了大量的JavaScript工作,或任何可能有异常的跨浏览器行为,这是非常值得考虑的过度.

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

以下示例使用 jQuery (可能是最常用的JavaScript库)进行了复制(尽管还有其他一些值得研究的太).

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

Changing Classes with jQuery:

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

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

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

此外,jQuery提供了一个快捷方式来添加一个类,如果它不适用,或删除一个类:

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


Assigning a function to a click event with jQuery:

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

或,无需ID:

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


HTML5 Techniques for changing classes

现代浏览器已添加 classList 它提供了方法来更容易操纵类,而不需要一个库:

document.getElementById("MyElement").classList.add('class');

document.getElementById("MyElement").classList.remove('class');

if ( document.getElementById("MyElement").classList.contains('class') )

document.getElementById("MyElement").classList.toggle('class');

很遗憾,这些在v10之前的Internet Explorer中无效,但有 shim < / a>以将其支持添加到IE8和IE9,可从此页面获取.




相关问题推荐