如何使用JavaScript更改元素的类？

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

当前回答

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元素的类名

2020-03-20 12:25:24

其他回答

你也可以这样做：

document.getElementById('id').classList.add('class');
document.getElementById('id').classList.remove('class');

要切换类（如果存在则删除，否则添加）：

document.getElementById('id').classList.toggle('class');

2011-08-05 17:44:12

对于jQuery这样的库，这是最简单的：

<input type="button" onClick="javascript:test_byid();" value="id='second'" />

<script>
function test_byid()
{
    $("#second").toggleClass("highlight");
}
</script>

2008-10-12 20:12:16

TL；博士：

document.getElementById('id').className = 'class'

document.getElementById('id').classList.add('class');
document.getElementById('id').classList.remove('class');

就是这样。

而且，如果你真的想知道原因并教育自己，那么我建议阅读彼得·布顿的答案。太完美了。

注：

这可以通过（文档或事件）实现：

按ID获取元素（）getElementsByClassName（）查询选择器（）查询选择器全部（）

2019-02-22 10:22:35

无意冒犯，但动态更改类是不清楚的，因为它迫使CSS解释器重新计算整个网页的视觉呈现。

原因是CSS解释器几乎不可能知道是否可以更改任何继承或级联，因此简单的答案是：

永远不要动态更改className！-）

但通常只需要更改一两个属性，这很容易实现：

function highlight(elm){
    elm.style.backgroundColor ="#345";
    elm.style.color = "#fff";
}

2008-10-12 20:16:33

在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

2011-05-28 07:19:25

如何使用JavaScript更改元素的类？

推荐文章

最新文章

标签