如何使用JavaScript更改HTML元素的类以响应onclick或任何其他事件?
当前回答
无意冒犯,但动态更改类是不清楚的,因为它迫使CSS解释器重新计算整个网页的视觉呈现。
原因是CSS解释器几乎不可能知道是否可以更改任何继承或级联,因此简单的答案是:
永远不要动态更改className!-)
但通常只需要更改一两个属性,这很容易实现:
function highlight(elm){
elm.style.backgroundColor ="#345";
elm.style.color = "#fff";
}
其他回答
只需使用myElement.classList=“new class”,除非您需要维护其他现有类,在这种情况下,您可以使用classList.add、.remove方法。
var doc=文档;var divOne=doc.getElementById(“一”);var goButton=doc.getElementById(“go”);goButton.addEventListener(“单击”,函数(){divOne.classList=“蓝色”;});第二部分{最小高度:48px;最小宽度:48px;}.有边框{边框:1px实心黑色;}.绿色{背景:绿色;}.蓝色{背景:蓝色;}<button id=“go”>更改类别</button><div id=“one”class=“borded green”></div>
哇,奇怪这里有这么多过分的答案。。。
<div class="firstClass" onclick="this.className='secondClass'">
可以这样使用node.className:
document.getElementById('foo').className = 'bar';
根据PPK,这应该在Internet Explorer 5.5及更高版本中工作。
用于更改类的现代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”),这是下面的示例所使用的-当然,您可以通过其他方式获取元素,在正确的情况下,可以直接使用它-但是,详细讨论这一点超出了答案的范围。
要更改元素的所有类,请执行以下操作:
要用一个或多个新类替换所有现有类,请设置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 the end of the string or space)
g标志告诉replace根据需要重复,以防类名被多次添加。
要检查类是否已应用于元素,请执行以下操作:
上面用于删除类的相同正则表达式也可以用作检查特定类是否存在:
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框架和库
以上代码都是标准JavaScript代码,但是,通常使用框架或库来简化常见任务,并从编写代码时可能想不到的固定错误和边缘情况中获益。
虽然有些人认为添加一个~50KB的框架来简单地更改一个类是过分的,但如果您正在做大量的JavaScript工作或任何可能具有异常跨浏览器行为的事情,那么它非常值得考虑。
(非常粗略地说,库是为特定任务设计的一组工具,而框架通常包含多个库并执行一整套任务。)
下面使用jQuery复制了上面的示例,jQuery可能是最常用的JavaScript库(尽管还有其他值得研究的)。
(注意这里的$是jQuery对象。)
使用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);
线路
document.getElementById("MyElement").className = document.getElementById("MyElement").className.replace(/\bMyClass\b/','')
应该是:
document.getElementById("MyElement").className = document.getElementById("MyElement").className.replace('/\bMyClass\b/','');