目录

HTML DOM 元素 className

❮上一节 ❮ 元素对象参考下一节❯

示例

设置元素的类属性：

element.className = "myStyle";

亲自试一试 »

获取"myDIV"的类属性：

let value = document.getElementById("myDIV").className;

亲自试一试 »

在两个类名之间切换：

if (element.className == "myStyle") {
element.className = "newStyle";
} else {
element.className = "myStyle";
}

亲自试一试 »

下面有更多示例。

描述

这个classNameproperty 设置或返回元素的类属性。

也可以看看：

元素类列表属性

文档 getElementsByClassName() 方法

HTML DOM 样式对象

语法

返回类名属性：

HTMLElementObject.className

设置类名属性：

HTMLElementObject.className = class

属性值

Value	Description
class	The class name(s) of an element. Separate multiple classes with spaces, like "test demo".

返回值

Type	Description
String	The class, or a space-separated list of classes, of an element

更多示例

获取第一个 <div> 元素的 class 属性（如果有）：

let value = document.getElementsByTagName("div")[0].className;

亲自试一试 »

获取具有多个类的类属性：

<div id="myDIV" class="myStyle test example">
<p>I am myDIV.</p>
</div>

let value = document.getElementById("myDIV").className;

亲自试一试 »

用新的类属性覆盖现有的类属性：

element.className = "newClassName";

亲自试一试 »

要添加新类而不覆盖现有值，请添加空格和新类：

element.className += " class1 class2";

亲自试一试 »

如果 "myDIV" 有一个 "myStyle" 类，请更改字体大小：

const elem = document.getElementById("myDIV");

if (elem.className == "mystyle") {
elem.style.fontSize = "30px";
}

亲自试一试 »

如果您从此页面顶部滚动 50 像素，则会添加类 "test"：

window.onscroll = function() {myFunction()};

function myFunction() {
if (document.body.scrollTop > 50) {
document.getElementById("myP").className = "test";
} else {
document.getElementById("myP").className = "";
}
}

亲自试一试 »

相关页面

CSS 教程：CSS 语法

CSS 参考：CSS。类选择器

浏览器支持

element.className所有浏览器都支持：


Chrome	Edge	Firefox	Safari	Opera	IE
Yes	Yes	Yes	Yes	Yes	Yes

❮上一节 ❮ 元素对象参考下一节❯