如何使用 JavaScript 为元素添加类？

2025年3月17日 | 阅读 3 分钟

class 属性可用于 CSS，以处理具有相应类名的元素的某些任务。在本文中，我们将讨论如何使用 JavaScript 为元素添加类。在 JavaScript 中，有几种方法可以为元素添加类。我们可以使用 .className 属性或 .add() 方法为特定元素添加类名。

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

使用 .className 属性

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

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

如果元素已声明一个类，而我们需要向同一元素添加一个新的类名，则应在输入新类名之前插入一个空格，否则它将覆盖现有类名。可以按如下方式编写：

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

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

语法

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

设置类名

返回类名

下面是使用 .className 属性的示例。

示例 - 添加类名

在此示例中，我们将 "para" 类添加到 ID 为 "p1" 的段落元素中，使用了 .className 属性。我们使用类名 "para" 为相应的段落应用 CSS。

我们必须单击提供的 HTML 按钮 "添加类" 才能看到效果。

<!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 TpointTech.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>

输出

How to add a class to an element using JavaScript

单击给定按钮后，输出将是 -

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

示例 - 获取类名

在此示例中，我们将使用 .className 属性获取 ID 为 "p1" 的段落元素的类名。

我们必须单击提供的 HTML 按钮 "获取类名" 才能看到效果。

<!DOCTYPE html>
<html>

<head>
</head>

<body>

<h1>
Hello World :)
</h1>

<p id = "p1" class = "para jtp">
Welcome to the TpointTech.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>

输出

单击给定按钮后，输出将是 -

使用 add() 方法

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

语法

示例

在此示例中，我们将 add() 方法用于向 ID 为 "p1" 的段落元素添加类名。我们必须单击提供的 HTML 按钮 "添加类" 才能看到效果。

<!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 TpointTech.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 计算圆的周长和面积

如何使用 JavaScript 为元素添加类？

使用 .className 属性

语法

示例 - 添加类名

示例 - 获取类名

使用 add() 方法

语法

示例

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

JavaScript 基础

JS 变量和数据类型

JS 控制语句

JavaScript 函数

JavaScript 对象

JS 高级函数

JS Promises & Async/Await

JavaScript DOM

JavaScript JSON 对象

JavaScript 验证

JavaScript Cookies

异常处理

JavaScript 集合

JavaScript 事件

JavaScript OOPs

JavaScript BOM

面试题

选择题

差异

JavaScript Map 方法

JavaScript Handler

JavaScript Number 方法

JavaScript Reflect

JavaScript Symbol

Symbol 属性

JavaScript Math 方法

JavaScript Date 方法

JavaScript DataView

JavaScript Object 方法

JavaScript Set 方法

JavaScript 字符串方法

JavaScript TypedArray 方法

JavaScript WeakMap 方法

JavaScript WeakSet 方法

JavaScript 数组方法

JavaScript RegExp 对象

JavaScript 附加内容

JavaScript 杂项

JavaScript 进阶

问题

Lodash

如何使用 JavaScript 为元素添加类？

使用 .className 属性

语法

示例 - 添加类名

示例 - 获取类名

使用 add() 方法

语法

示例

相关帖子

使用 JavaScript 框架创建演示文稿

如何在 JavaScript 中将对象转换为数组

JavaScript 设计模式

使用 JavaScript 遍历数组对象

Javascript offsetY 属性

JavaScript Select Option

如何使用 JavaScript 计算圆的周长和面积

JavaScript 一等公民函数

JavaScript 中的浅拷贝

如何在 JavaScript 中切换密码可见性