如何更改 HTML 元素的类以响应 onclick
或任何其他使用 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 中不起作用,尽管有 shim添加对 IE8 和 IE9 的支持,可从 this page 获得.不过,它越来越多supported .document.getElementById("Id")
,这就是下面的例子使用的——你当然可以通过其他方式获取元素,在正确的情况下可以简单地使用this
相反-但是,对此进行详细说明超出了答案的范围。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 the end of the string or space)
g
标志告诉替换根据需要重复,以防类名已被多次添加。if ( document.getElementById("MyElement").className.match(/(?:^|\s)MyClass(?!\S)/) )
onclick="this.className+=' MyClass'"
),但不建议这样做。尤其是在较大的应用程序中,通过将 HTML 标记与 JavaScript 交互逻辑分离来实现更可维护的代码。<script type="text/javascript">
function changeClass(){
// Code examples from above
}
</script>
...
<button onclick="changeClass()">My Button</button>
(脚本标签中不需要此代码,这只是为了简化示例,将 JavaScript 包含在不同的文件中可能更合适。)<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 可能不存在,因此该行将失败。)$
这里是 jQuery 对象。)$('#MyElement').addClass('MyClass');
$('#MyElement').removeClass('MyClass');
if ( $('#MyElement').hasClass('MyClass') )
此外,jQuery 提供了一个快捷方式来添加一个不适用的类,或者删除一个适用的类:$('#MyElement').toggleClass('MyClass');
$('#MyElement').click(changeClass);
或者,不需要 id:$(':button:contains(My Button)').click(changeClass);
https://stackoverflow.com/questions/195951/