HTML DOM className 属性

HTML DOM Element 对象

className属性将指定元素的class属性值设置或返回为字符串。

如果指定的元素没有类属性或未设置类属性,则返回一个null字符串。

语法:

返回className属性:

element.className

设置className属性:

element.className = cName
document.getElementById("x").className = "para";
测试看看‹/›

浏览器兼容性

所有浏览器完全支持className属性:

属性
className

属性值

描述
cName一个字符串变量,表示当前元素的类或以空格分隔的类

技术细节

返回值:一个字符串,表示元素的类或类的空格分隔列表
DOM版本:DOM级别1

更多实例

返回第一个<div>元素的类名称:

var x = document.getElementsByTagName("div")[0].className;
测试看看‹/›

用新名称覆盖现有的类名称:

<div class="myDiv">这是一个DIV元素</div>

<script>
var x = document.getElementsByTagName("div")[0];
x.className = "anotherClass";
</script>
测试看看‹/›

要将类添加到元素中而不覆盖现有值,请插入空格和新的类名称:

<div class="myDiv">这是一个DIV元素</div>

<script>
var x = document.getElementsByTagName("div")[0];
x.className += " anotherClass";
</script>
测试看看‹/›

找出<div>元素是否具有“shadow”类:

var x = document.getElementsByTagName("div")[0];

if (x.className.indexOf("shadow") != -1) {
   alert("Yes... The DIV has 'shadow' class");
} else {
   alert("False");
}
测试看看‹/›

相关参考

CSS教程:CSS选择器

CSS参考:CSS#id选择器

CSS Reference: CSS .class 选择器

JavaScript参考:字符串indexOf()方法

HTML DOM参考:HTML DOM classList属性

HTML DOM参考:HTML DOM getElementsByClassName()方法

HTML DOM参考:HTML DOM getElementById()方法

HTML DOM参考:HTML DOM querySelector()方法

HTML DOM Element 对象