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 属性为元素指定一个或多个类名。
class 属性主要用于指向样式表中的类。但是，它也可以通过 JavaScript（通过 HTML DOM）来更改具有指定类的 HTML 元素。
浏览器支持
| Attribute | |||||
|---|---|---|---|---|---|
| 类别 | 是 | 是 | 是 | 是 | 是 |
语法
<element class="classname">
属性值
| 值 | 描述 |
|---|---|
| 类名 | 为元素指定一个或多个类名。要指定多个类，请用空格分隔类名，例如 <span class="left important">。这允许您为一个 HTML 元素组合多个 CSS 类。 命名规则
|
更多示例
示例
为一个 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"（索引 0）的元素添加黄色背景颜色。
let x = document.getElementsByClassName("example");
x[0].style.backgroundColor = "yellow";
自己动手试一试 »
示例
使用 JavaScript 为 id="myDIV" 的元素添加 "mystyle" 类
document.getElementById("myDIV").classList.add("mystyle");
自己动手试一试 »
相关页面
HTML 教程：HTML 属性
CSS 教程：CSS 语法
CSS 参考：CSS .class 选择器
HTML DOM 参考：HTML DOM getElementsByClassName() 方法
HTML DOM 参考：HTML DOM className 属性
HTML DOM 参考：HTML DOM classList 属性
HTML DOM 参考: HTML DOM Style 对象
