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