HTML class 属性
实例
在 HTML 文档中使用 class 属性:
<html>
<head>
<style>
h1.intro {
color: blue;
}
p.important {
color: green;
}
</style>
</head>
<body>
<h1 class="intro">标题 1</h1>
<p>这是一个段落。</p>
<p class="important">请注意，这是一个重要的段落。 :)</p>
</body>
</html>
亲自试一试 »
下面有更多实例。
定义和用法
class 属性规定元素的类名（classname）。
class 属性大多数时候用于指向样式表中的类（class）。不过，也可以利用它通过 JavaScript 来改变带有指定 class 的 HTML 元素。
浏览器支持
| 属性 | |||||
|---|---|---|---|---|---|
| class | Yes | Yes | Yes | Yes | Yes |
语法
<element class="classname">
属性值
| 值 | 描述 |
|---|---|
| classname | 规定元素的类的名称。如需为一个元素规定多个类，用空格分隔类名。
<span class="left important">. HTML 元素允许使用多个类。
名称规则:
|
更多实例
实例
为元素添加多个类:
<!DOCTYPE html>
<html>
<head>
<style>
h1.intro {
color: blue;
text-align: center;
}
.important {
background-color: yellow;
}
</style>
</head>
<body>
<h1 class="intro important">标题 1</h1>
<p>这是一个段落。</p>
</body>
</html>
亲自试一试 »
实例
使用 JavaScript 向带有 class="example" (index 0) 的第一个元素添加黄色背景色。
var x = document.getElementsByClassName("example");
x[0].style.backgroundColor = "yellow";
亲自试一试 »
实例
使用 JavaScript 将 "mystyle" 类添加到 id="myDIV" 的元素中:
document.getElementById("myDIV").classList.add("mystyle");
亲自试一试 »
相关页面
HTML 教程: HTML 属性
CSS 教程: CSS 语法
CSS 参考手册: CSS .class Selector
HTML DOM 参考手册: HTML DOM getElementsByClassName() 方法
HTML DOM 参考手册: HTML DOM className 属性
HTML DOM 参考手册: HTML DOM classList 属性
HTML DOM 参考手册: HTML DOM Style 对象
