HTML DOM className 属性
页面下方有更多实例。
定义和用法
className 属性设置或返回元素的类名（元素的class属性的值）。
提示: className 的一个类似属性是 classList 属性。
浏览器支持
| 属性 | |||||
|---|---|---|---|---|---|
| className | Yes | Yes | Yes | Yes | Yes |
语法
返回 className 属性:
HTMLElementObject.className
设置 className 属性:
HTMLElementObject.className = class
属性值
| 值 | 描述 |
|---|---|
| class | 指定元素的类名。要应用多个类，请用空格分隔它们，如 "test demo" |
技术细节
| 返回值: | 一个字符串，表示一个元素的类或以空格分隔的类列表 |
|---|
更多实例
实例
关于如何获取元素类名的其他示例:
var x = document.getElementsByClassName("mystyle")[0].className;
var y = document.getElementById("myDIV").className;
亲自试一试 »
var y = document.getElementById("myDIV").className;
实例
获取包含多个类的元素的类名:
<div id="myDIV" class="mystyle test example">I am a DIV element</div>
var x = document.getElementById("myDIV").className;
亲自试一试 »
var x = document.getElementById("myDIV").className;
实例
用新类名覆盖现有类名:
<div id="myDIV" class="mystyle">I am a DIV element</div>
document.getElementById("myDIV").className = "newClassName";
亲自试一试 »
document.getElementById("myDIV").className = "newClassName";
实例
要在不覆盖现有值的情况下向元素添加类，请插入空格和新类名:
document.getElementById("myDIV").className += " anotherClass";
亲自试一试 »
实例
如果 id="myDIV" 的元素中有一个 "mystyle" 类，请更改其字体大小:
var x = document.getElementById("myDIV");
if (x.className === "mystyle") {
x.style.fontSize = "30px";
}
亲自试一试 »
if (x.className === "mystyle") {
x.style.fontSize = "30px";
}
实例
在两个类名之间切换。本例在 <div> 中查找 "mystyle" 类，如果它存在，将被 "mystyle2" 覆盖:
function myFunction(){
var x = document.getElementById("myDIV");
// If "mystyle" exist, overwrite it with "mystyle2"
if (x.className === "mystyle") {
x.className = "mystyle2";
} else {
x.className = "mystyle";
}
}
亲自试一试 »
var x = document.getElementById("myDIV");
// If "mystyle" exist, overwrite it with "mystyle2"
if (x.className === "mystyle") {
x.className = "mystyle2";
} else {
x.className = "mystyle";
}
}
实例
在不同滚动位置的类名之间切换 - 当用户从顶部向下滚动50个像素时，类名 "test" 将被添加到元素中（再次向上滚动时会被删除）。
window.onscroll = function() {myFunction()};
function myFunction() {
if (document.body.scrollTop > 50) {
document.getElementById("myP").className = "test";
} else {
document.getElementById("myP").className = "";
}
}
亲自试一试 »
function myFunction() {
if (document.body.scrollTop > 50) {
document.getElementById("myP").className = "test";
} else {
document.getElementById("myP").className = "";
}
}
相关页面
CSS 教程: CSS 语法
CSS 参考手册: CSS .class Selector
HTML DOM 参考手册: HTML DOM classList 属性
HTML DOM 参考手册: HTML DOM getElementsByClassName() 方法
HTML DOM 参考手册: HTML DOM Style 对象
❮ Element 对象
