HTML DOM 元素 className
示例
为元素设置 class 属性
element.className = "myStyle";
自己尝试 »
获取 "myDIV" 的 class 属性
let value = document.getElementById("myDIV").className;
自己尝试 »
在两个类名之间切换
if (element.className == "myStyle") {
element.className = "newStyle";
} else {
element.className = "myStyle";
}
自己尝试 »
更多示例如下。
描述
The className 属性设置或返回元素的 class 属性。
语法
返回 className 属性
HTMLElementObject.className
设置 className 属性
HTMLElementObject.className = class
属性值
| 值 | 描述 |
| class | 元素的类名。 用空格分隔多个类，例如“test demo”。 |
返回值
| 类型 | 描述 |
| 字符串 | 元素的类，或用空格分隔的类列表 |
更多示例
获取具有多个类的 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 |
| 是 | 是 | 是 | 是 | 是 | 是 |
