如何使用JavaScript向元素添加类

类属性可以在CSS中用于对具有相应类名的元素执行某些操作。在本文中，我们将讨论如何使用JavaScript向元素添加类。在JavaScript中，有一些方法可以向元素添加类。我们可以使用.className属性或.add()方法将类名添加到特定元素。

现在，让我们讨论一下向元素添加类的方法。

使用.className属性

.className属性设置元素的类名。该属性可用于返回元素的类属性的值。我们可以使用该属性向HTML元素添加类，而不替换其现有类。

要添加多个类，我们必须使用空格将它们的名称分隔开，例如”class1 class2″。

如果某个元素已经声明了一个类，并且我们需要向同一元素添加新的类名，则应在写入新类名之前插入一个空格进行声明，否则它将覆盖现有的类名。可以写成如下形式：

<div id = "div1" class = "oldClass"> </div>
document.getElementById("div1").className = " newClass";

在上面的代码中，我们在 newClass 之前插入了一个空格。

语法

常用的设置或返回类名的语法如下。

设置类名

element.className = class

返回类名

element.className

使用 .className 属性的示例如下：

示例 – 添加类名

在这个示例中，我们使用 .className 属性将 “para” 类添加到具有id “p1” 的段落元素上。我们使用类名 “para” 对相应的段落应用CSS样式。

我们需要点击给定的HTML按钮 “Add Class” 来看到效果。

<!DOCTYPE html>
<html>

<head>
<title>
add class name using JavaScript
</title>

<style>
.para {
font-size: 30px;
background-color: yellow;
color: blue;
border: 2px dotted red;
}
</style>
</head>

<body>

<h1>
Hello World :)
</h1>

<p id = "p1">
Welcome to the javaTpoint.com
</p>
<p> Click the following button to see the effect. </p>
<button onclick = "fun()">
Add Class
</button>
<script>
function fun() {
var a = document.getElementById("p1");
a.className = "para";
}
</script>
</body>

</html>

输出

如何使用JavaScript向元素添加类

点击给定按钮后，输出结果将为 –

如何使用JavaScript向元素添加类

在下一个示例中，我们将使用 .className 属性来获取类名。

示例 – 获取类名

在这个示例中，我们使用 .className 属性来获取具有 id = “p1” 的段落元素的类名。

我们需要点击给定的HTML按钮 “Get Class name” 来查看效果。

<!DOCTYPE html>
<html>

<head>
</head>

<body>

<h1>
Hello World :)
</h1>

<p id = "p1" class = "para jtp">
Welcome to the javaTpoint.com
</p>
<p> Click the following button to get the class name. </p>
<p id = "p2"> </p>
<button onclick = "fun()">
Get Class name
</button>
<script>
function fun() {
var a = document.getElementById("p1").className;
document.getElementById('p2').innerHTML = "The class names of paragraph with 'id = p1' is: " + a;
}
</script>
</body>

</html>

输出

如何使用JavaScript向元素添加类

点击给定按钮后，输出结果将为 –

如何使用JavaScript向元素添加类

使用add()方法

现在，让我们来看看使用JavaScript添加类名的第二种方法。我们可以使用 add() 方法来将类名添加到特定元素。

语法

element.classList.add("class name");

示例

在这个示例中，我们使用 add() 方法向拥有 id = “p1” 的段落元素添加一个类名。我们必须点击给定的HTML按钮 “Add Class” 来查看效果。

<!DOCTYPE html>
<html>

<head>
<title>
add class name using JavaScript
</title>

<style>
.para {
font-size: 30px;
background-color: yellow;
color: blue;
border: 2px dotted red;
}
</style>
</head>

<body>

<h1>
Hello World :)
</h1>

<p id = "p1">
Welcome to the javaTpoint.com
</p>
<p> Click the following button to see the effect. </p>
<button onclick = "fun()">
Add Class
</button>
<script>
function fun() {
var a = document.getElementById("p1");
a.classList.add("para");
}
</script>
</body>

</html>

输出

如何使用JavaScript向元素添加类