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()方法