HTML DOM Element className
示例
设置元素的 class 属性
element.className = "myStyle";
自己动手试一试 »
获取 "myDIV" 的 class 属性
let value = document.getElementById("myDIV").className;
自己动手试一试 »
在两个类名之间切换
if (element.className == "myStyle") {
element.className = "newStyle";
} else {
element.className = "myStyle";
}
自己动手试一试 »
更多示例见下文。
描述
className 属性设置或返回元素的 class 属性。
语法
返回 className 属性
HTMLElementObject.className
设置 className 属性
HTMLElementObject.className = class
属性值
| 值 | 描述 |
| 类别 | 元素的类名。 多个类名用空格分隔，例如 "test demo"。 |
返回值
| 类型 | 描述 |
| 字符串 | 元素的类名，或用空格分隔的类名列表 |
更多示例
获取第一个 <div> 元素（如果有）的 class 属性
let value = document.getElementsByTagName("div")[0].className;
自己动手试一试 »
获取包含多个类的 class 属性
<div id="myDIV" class="myStyle test example">
<p>我是 myDIV。</p>
</div>
let value = document.getElementById("myDIV").className;
自己动手试一试 »
如果 "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 = "";
}
}
自己动手试一试 »
浏览器支持
element.className 支持所有浏览器
| Chrome | Edge | Firefox | Safari | Opera | IE |
| 是 | 是 | 是 | 是 | 是 | 是 |
