HTML DOM Element className 属性

定义和用法

className 属性设置或返回元素的 class 属性。

另请参阅：

Element classList 属性

Document getElementsByClassName() 方法

HTML DOM Style 对象

实例

例子 1

设置元素的 class 属性：

element.className = "myStyle";

亲自试一试

例子 2

获取 "myDIV" 的 class 属性：

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

亲自试一试

例子 3

在两个类名之间切换：

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

亲自试一试

提示：页面下方提供更多实例。

语法

返回 className 属性：

HTMLElementObject.className

设置 className 属性：

HTMLElementObject.className = class

属性值

值 描述
class

元素的类名。

用空格分隔多个类，比如 "test demo"。

返回值

类型 描述
字符串 元素的类，或以空格分隔的类列表。

更多实例

例子 4

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

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

亲自试一试

例子 5

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

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



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

亲自试一试

例子 6

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

element.className = "newClassName";

亲自试一试

例子 7

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

element.className += " class1 class2";

亲自试一试

例子 8

如果 "myDIV" 有 "myStyle" 类，则更改字体大小：

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

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

亲自试一试

例子 9

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

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

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

亲自试一试

浏览器支持

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

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
支持 支持 支持 支持 支持 支持

相关页面

CSS 教程：CSS 语法

CSS 参考手册：CSS .class 选择器