HTML class 屬性
HTML class 屬性用於為 HTML 元素指定一個類。
多個 HTML 元素可以共享同一個類。
使用 class 屬性
class 屬性通常用於指向樣式表中的類名。它也可以被 JavaScript 用來訪問和操作具有特定類名的元素。
在下面的示例中，我們有三個 <div> 元素，它們的 class 屬性值為“city”。所有這三個 <div> 元素都將根據頭部部分 .city 樣式定義進行同等樣式設定。
示例
<!DOCTYPE html>
<html>
<head>
<style>
.city {
background-color: tomato;
color: white;
border: 2px solid black;
margin: 20px;
padding: 20px;
}
</style>
</head>
<body>
<div class="city">
<h2>倫敦</h2>
<p>倫敦是英格蘭的首都。</p>
</div>
<div class="city">
<h2>巴黎</h2>
<p>巴黎是法國的首都。</p>
</div>
<div class="city">
<h2>東京</h2>
<p>東京是日本的首都。</p>
</div>
</body>
</html>
自己動手試一試 »
在下面的示例中，我們有兩個 <span> 元素，它們的 class 屬性值為“note”。這兩個 <span> 元素都將根據頭部部分 .note 樣式定義進行同等樣式設定。
示例
<!DOCTYPE html>
<html>
<head>
<style>
.note {
font-size: 120%;
color: red;
}
</style>
</head>
<body>
<h1>我的 <span class="note">重要</span> 標題</h1>
<p>這是<span class="note">重要</span>的文字。</p>
</body>
</html>
自己動手試一試 »
類的語法
建立類；寫入一個句點（.）字元，後跟一個類名。然後，在花括號 {} 中定義 CSS 屬性。
示例
建立一個名為“city”的類
<!DOCTYPE html>
<html>
<head>
<style>
.city {
background-color: tomato;
color: white;
padding: 10px;
}
</style>
</head>
<body>
<h2 class="city">倫敦</h2>
<p>倫敦是英格蘭的首都。</p>
<h2 class="city">巴黎</h2>
<p>巴黎是法國的首都。</p>
<h2 class="city">東京</h2>
<p>東京是日本的首都。</p>
</body>
</html>
自己動手試一試 »
多個類
HTML 元素可以屬於多個類。
要定義多個類，請用空格分隔類名，例如 <div class="city main">。該元素將根據所有指定的類進行樣式設定。
在下面的示例中，第一個 <h2> 元素同時屬於 city 類和 main 類，並將應用這兩個類的 CSS 樣式：
不同的元素可以共享同一個類
不同的 HTML 元素可以指向同一個類名。
在下面的示例中，<h2> 和 <p> 都指向“city”類，並將共享相同的樣式。
在 JavaScript 中使用 class 屬性
類名也可以被 JavaScript 用來為特定元素執行某些任務。
JavaScript 可以使用 getElementsByClassName() 方法來訪問具有特定類名的元素。
示例
點選按鈕以隱藏所有類名為“city”的元素
<script>
function myFunction() {
var x = document.getElementsByClassName("city");
for (var i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
}
</script>
自己動手試一試 »
如果你不理解上面的程式碼，請不用擔心。
你將在我們的 HTML JavaScript 章中瞭解更多關於 JavaScript 的知識，或者你可以學習我們的 JavaScript 教程。
Chapter Summary
- HTML
class屬性為元素指定一個或多個類名。 - 類名用於 CSS 和 JavaScript 來選擇和訪問特定元素。
class屬性可用於任何 HTML 元素。- 類名區分大小寫。
- 不同的 HTML 元素可以指向同一個類名。
- JavaScript 可以使用
getElementsByClassName()方法來訪問具有特定類名的元素。
影片：HTML Class
