HTML class 属性

定义和用法

class 属性规定元素的类名（classname）。

class 属性主要时候用于指向样式表中的类（class）。不过，也可以利用它通过 JavaScript（HTML DOM）来改变带有指定 class 的 HTML 元素。

另请参阅：

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 对象

实例

例子 1

在 HTML 文档中使用 class 属性：

<html>
<head>
<style>
h1.intro {
  color: blue;
}

p.important {
  color: green;
}
</style>
</head>
<body>

<h1 class="intro">Header 1</h1>
<p>A paragraph.</p>
<p class="important">请注意，这是一个重要的段落。:）</p>

</body>
</html>

亲自试一试

页面下方提供更多实例。

语法

<element class="classname">

属性值

值 描述
classname

为元素指定一个或多个类名。

如果要指定多个类，可以用空格分隔类名。

这允许你为一个 HTML 元素组合多个 CSS 类。

例如：<span class="left important">

命名规则：

  • 必须以字母 A-Z 或 a-z 开头
  • 可以后接：字母（A-Za-z）、数字（0-9）、连字符（"-"）和下划线（"_"）

更多实例

例子 2

将多个类添加到一个 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>

亲自试一试

例子 3

使用 JavaScript 将黄色背景色添加到第一个 class="example" 的元素（索引 0）。

let x = document.getElementsByClassName("example");
x[0].style.backgroundColor = "yellow";

亲自试一试

例子 4

使用 JavaScript 将 "mystyle" 类添加到 id 为 "myDIV" 的元素：

document.getElementById("myDIV").classList.add("mystyle");

亲自试一试

浏览器支持

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
支持 支持 支持 支持 支持