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>
自己尝试 »
下面有更多“自己尝试”示例。
定义和用法
The class 属性为元素指定一个或多个类名。
The class 属性主要用于指向样式表中的类。但是，它也可以通过 JavaScript（通过 HTML DOM）来更改具有指定类的 HTML 元素。
浏览器支持
| 属性 | |||||
|---|---|---|---|---|---|
| class | 是 | 是 | 是 | 是 | 是 |
语法
<element class="classname">
属性值
| 值 | 描述 |
|---|---|
| classname | 为元素指定一个或多个类名。若要指定多个类，请用空格分隔类名，例如 <span class="left important">。这样可以将多个 CSS 类组合到一个 HTML 元素中。 命名规则
|
更多示例
示例
将多个类添加到一个 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 将“mystyle”类添加到具有 id="myDIV" 的元素
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 样式对象
