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 屬性為元素指定一個或多個類名。
class 屬性主要用於指向樣式表中的類。但是，它也可以透過 JavaScript（透過 HTML DOM）來更改具有指定類的 HTML 元素。
瀏覽器支援
| Attribute | |||||
|---|---|---|---|---|---|
| 類別 | 是 | 是 | 是 | 是 | 是 |
語法
<element class="classname">
屬性值
| 值 | 描述 |
|---|---|
| 類名 | 為元素指定一個或多個類名。要指定多個類，請用空格分隔類名，例如 <span class="left important">。這允許您為一個 HTML 元素組合多個 CSS 類。 命名規則
|
更多示例
示例
為一個 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 為 id="myDIV" 的元素新增 "mystyle" 類
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 Style 物件
