如何使用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中不起作用,尽管有一个垫片可以将其添加到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);
其他回答
这对我很有用:
function setCSS(eleID) {
var currTabElem = document.getElementById(eleID);
currTabElem.setAttribute("class", "some_class_name");
currTabElem.setAttribute("className", "some_class_name");
}
无意冒犯,但动态更改类是不清楚的,因为它迫使CSS解释器重新计算整个网页的视觉呈现。
原因是CSS解释器几乎不可能知道是否可以更改任何继承或级联,因此简单的答案是:
永远不要动态更改className!-)
但通常只需要更改一两个属性,这很容易实现:
function highlight(elm){
elm.style.backgroundColor ="#345";
elm.style.color = "#fff";
}
在我的一个不使用jQuery的旧项目中,我构建了以下函数,用于添加、删除和检查元素是否具有类:
function hasClass(ele, cls) {
return ele.className.match(new RegExp('(\\s|^)' + cls + '(\\s|$)'));
}
function addClass(ele, cls) {
if (!hasClass(ele, cls))
ele.className += " " + cls;
}
function removeClass(ele, cls) {
if (hasClass(ele, cls)) {
var reg = new RegExp('(\\s|^)' + cls + '(\\s|$)');
ele.className = ele.className.replace(reg, ' ');
}
}
因此,例如,如果我想onclick向按钮添加一些类,我可以使用这个:
<script type="text/javascript">
function changeClass(btn, cls) {
if(!hasClass(btn, cls)) {
addClass(btn, cls);
}
}
</script>
...
<button onclick="changeClass(this, "someClass")">My Button</button>
现在可以肯定,使用jQuery会更好。
在ASP.NET中使用JavaScript更改元素的CSS类:
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
If Not Page.IsPostBack Then
lbSave.Attributes.Add("onmouseover", "this.className = 'LinkButtonStyle1'")
lbSave.Attributes.Add("onmouseout", "this.className = 'LinkButtonStyle'")
lbCancel.Attributes.Add("onmouseover", "this.className = 'LinkButtonStyle1'")
lbCancel.Attributes.Add("onmouseout", "this.className = 'LinkButtonStyle'")
End If
End Sub
哇,奇怪这里有这么多过分的答案。。。
<div class="firstClass" onclick="this.className='secondClass'">