Atribut class HTML

Definisi dan penggunaan

class Atribut menentukan nama kelas (classname) elemen.

class Atribut utamanya digunakan untuk merujuk kepada kelas (class) dalam laporan gaya. Walau bagaimanapun, ia juga boleh digunakan melalui JavaScript (HTML DOM) untuk mengubah elemen HTML yang mempunyai kelas yang ditentukan.

另请参阅：

HTML 教程：Sifat HTML

CSS 教程：Sintaks CSS

CSS 参考手册：Pemilih .class CSS

HTML DOM 参考手册：HTML DOM getElementsByClassName() 方法

HTML DOM 参考手册：HTML DOM className 属性

HTML DOM 参考手册：HTML DOM classList 属性

HTML DOM 参考手册：Objek Style DOM HTML

实例

例子 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>

Coba sendiri

页面下方提供更多实例。

语法

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

Coba sendiri

例子 3

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

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

Coba sendiri

Contoh 4

Gunakan JavaScript untuk menambahkan kelas "mystyle" ke elemen dengan id "myDIV":

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

Coba sendiri

Dukungan pereka

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Dukungan Dukungan Dukungan Dukungan Dukungan