如何使用JavaScript更改HTML元素的类以响应onclick或任何其他事件?


当前回答

在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

其他回答

在支持Internet Explorer 6的普通JavaScript中更改元素的类

您可以尝试使用node attributes属性来保持与旧浏览器(甚至Internet Explorer 6)的兼容性:

函数getClassNode(元素){对于(var i=element.attributes.length;i-;)if(element.attributes[i].nodeName=='class')return元素.attributes[i];}函数removeClass(classNode,className){var索引,classList=classNode.value.split(“”);如果((index=classList.indexOf(className))>-1){classList.拼接(索引,1);classNode.value=classList.join(“”);}}函数hasClass(classNode,className){return classNode.value.indexOf(className)>-1;}函数addClass(classNode,className){if(!hasClass(classNode,className))classNode.value+=“”+className;}document.getElementById('message').addEventListener('click',function(){var classNode=getClassNode(this);var className=hasClass(classNode,“red”)&&“blue”| |“red”;removeClass(classNode,'red');removeClass(classNode,'blue');addClass(classNode,className);}).红色{颜色:红色;}.红色:之前{内容:“我红了!”;}.红色:之后{content:'再次';}.蓝色{颜色:蓝色;}.蓝色:之前{内容:“我是蓝色的!”}<span id=“message”class=“”>单击我</span>

可以这样使用node.className:

document.getElementById('foo').className = 'bar';

根据PPK,这应该在Internet Explorer 5.5及更高版本中工作。

OP的问题是如何使用JavaScript更改元素的类?

现代浏览器允许您使用一行JavaScript实现这一点:

document.getElementById('id').classList.replace('span1','span2')

classList属性提供了具有多种方法的DOMTokenList。可以使用add()、remove()或replace()等简单操作对元素的classList进行操作。或者像使用key()、values()和entries()来处理对象或Map那样使用非常复杂的类。

彼得·布顿(Peter Boughton)的回答很好,但现在已经超过十年了。所有现代浏览器现在都支持DOMTokenList-请参阅https://caniuse.com/#search=classList甚至Internet Explorer 11也支持一些DOMTokenList方法。

JavaScript中有一个属性className,用于更改HTML元素类的名称。现有的类值将替换为您在className中分配的新类值。

<!DOCTYPE html>
<html>
<head>
<title>How can I change the class of an HTML element in JavaScript?</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<h1 align="center"><i class="fa fa-home" id="icon"></i></h1><br />

<center><button id="change-class">Change Class</button></center>

<script>
var change_class = document.getElementById("change-class");
change_class.onclick = function()
{
    var icon=document.getElementById("icon");
    icon.className = "fa fa-gear";
}
</script>
</body>
</html>

Credit-如何在JavaScript中更改HTML元素的类名

线路

document.getElementById("MyElement").className = document.getElementById("MyElement").className.replace(/\bMyClass\b/','')

应该是:

document.getElementById("MyElement").className = document.getElementById("MyElement").className.replace('/\bMyClass\b/','');