轻松上手,快乐学习!
HTML CSS JAVASCRIPT SQL PYTHON MYSQL PHP GIT 问答 工具 导航 更多 实例 参考

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 元素允许使用多个类。

名称规则：

  • 必须以字母 A-Z 或 a-z 开头
  • 可以是以下字符： (A-Za-z), 数字 (0-9), 横杆 ("-"), 和 下划线 ("_")
  • 在 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 对象