在HTML文档中,className属性用于设置或返回元素的class属性的值。使用此属性,用户可以将元素的类别更改为所需的类别。
用法:
- 返回className属性
HTMLElementObject.className;
- 设置className属性
HTMLElementObject.className = class;
className指定元素的类名称。要应用多个类,请使用空格分隔它们。例如,如果一个元素具有两个类,则我们将它们指定为“ classname1 classname2”,其中classname1和classname2是两个不同类的名称。 className属性返回字符串或元素类别的空格分隔列表。
示例1:本示例为<div>元素设置类。
<!DOCTYPE html>
<html>
<head>
<title>
HTML | DOM className Property
</title>
<style>
.do_style {
width:600px;
height:100px;
background-color:lightgreen;
text-align:center;
font-size:25px;
color:green;
margin-bottom:10px;
}
</style>
</head>
<body>
<p>Click the button to set a class for div.</p>
<div id="div1">
GeeksforGeeks
</div>
<button onclick="myFunction()">Try it</button>
<script>
function myFunction() {
document.getElementById("div1").className =
"do_style";
}
</script>
</body>
</html>
输出:
在单击按钮之前:
原来
单击按钮后:
单击尝试按钮后
- 说明:使用className属性为<div>元素的类分配一个值。
示例2:本示例获取<div>元素的类。
<!DOCTYPE html>
<html>
<head>
<title>
HTML | DOM className Property
</title>
<style>
.do_style {
width:600px;
height:100px;
background-color:lightgreen;
text-align:center;
font-size:25px;
color:green;
margin-bottom:10px;
}
</style>
</head>
<body>
<p>Click the button to set a class for div.</p>
<div id="div1">
GeeksforGeeks
</div>
<button onclick="myFunction()">Try it</button>
<script>
function myFunction() {
document.getElementById("div1").className =
"do_style";
}
</script>
</body>
</html>
输出:
在单击按钮之前:
原来
单击按钮后:
按下尝试按钮后
示例3:本示例将覆盖现有的类名称。
<!DOCTYPE html>
<html>
<head>
<title>
HTML | DOM className Property
</title>
<style>
.oldstyle {
width:300px;
height:50px;
background-color:lightgreen;
color:green;
margin-bottom:10px;
}
.newstyle {
width:400px;
height:100px;
background-color:white;
text-align:center;
font-size:25px;
color:green;
margin-bottom:10px;
}
</style>
</head>
<body>
<p>
Click the button to change the value of the
class attribute of div to "newstyle".
</p>
<div id="div1" class="oldstyle">
GeeksforGeeks
</div>
<button onclick="myFunction()">
Try it
</button>
<script>
function myFunction() {
document.getElementById("div1").className =
"newstyle";
}
</script>
</body>
</html>
输出:
在单击按钮之前:
原来
单击按钮后:
按下后尝试
支持的浏览器:
- 谷歌浏览器
- IE浏览器
- 火狐浏览器
- Opera
- 苹果浏览器
相关用法
- HTML DOM URL用法及代码示例
- HTML Bdo dir用法及代码示例
- HTML DOM value用法及代码示例
- HTML DOM specified用法及代码示例
- HTML DOM id用法及代码示例
- HTML DOM name用法及代码示例
- HTML DOM dir用法及代码示例
- HTML li value用法及代码示例
- HTML Map name用法及代码示例
- HTML DOM documentURI用法及代码示例
- HTML Progress max用法及代码示例
- HTML ins dateTime用法及代码示例
- HTML DOM clientWidth用法及代码示例
- HTML DOM scrollLeft用法及代码示例
- HTML DOM childElementCount用法及代码示例
注:本文由纯净天空筛选整理自chaitanyashah707大神的英文原创作品 HTML | DOM className Property。非经特殊声明,原始代码版权归原作者所有,本译文未经允许或授权,请勿转载或复制。