8.1 id屬性
全域屬性是在任何HTML元素上都可以使用的屬性。它們在識別、分類和管理網頁元素中扮演關鍵角色。
id屬性用於在頁面上唯一識別一個元素。id屬性的值應該在整個HTML文件中是唯一的。這個屬性經常用於與CSS和JavaScript的元素綁定。
語法：
<element id="unique-id">...</element>
使用範例：
CSS
#header {
background-color: #f4f4f4;
padding: 10px;
}
HTML
<div id="header">
<h1>標題</h1>
</div>
JavaScript
document.getElementById('header').style.color = 'blue';
優點：
- 唯一識別: 允許在頁面上唯一識別元素
- 樣式化: 方便應用CSS樣式
- DOM操作: 利用JavaScript容易訪問元素
8.2 class屬性
class屬性用於為元素指定一個或多個類。這些類可用於應用CSS樣式和通過JavaScript操作元素。與id不同，class的值不必唯一。
語法：
<element class="class-1 class-2">...</element>
使用範例：
CSS
.highlight {
background-color: yellow;
}
.bold {
font-weight: bold;
}
HTML
<p class="highlight">這段文字有黃色背景。</p>
<p class="bold">這段文字是粗體。</p>
<p class="highlight bold">這段文字既是粗體又有黃色背景。</p>
優點：
- 多重類: 允許為單個元素指定多個類
- 元素分組: 容易對元素組應用樣式
- DOM操作: 允許透過JavaScript方便處理元素組
8.3 data-*屬性
data-*屬性允許在HTML元素中儲存自定義數據。這些屬性以data-為前綴，可以具有任何值。它們常用於儲存對JavaScript有用的信息。
語法：
<element data-key="value">...</element>
使用範例：
HTML
<div data-user-id="12345" data-role="admin">
用戶ID 12345，角色 - 管理員。
</div>
JavaScript
// 找到第一個頁面上有data-user-id屬性的元素
const userElement = document.querySelector('[data-user-id]');
// 獲取data-user-id屬性的值並輸出到控制台
console.log(userElement.dataset.userId); // 輸出: 12345
// 獲取data-role屬性的值並輸出到控制台
console.log(userElement.dataset.role); // 輸出: admin
優點：
- 數據儲存: 方便儲存和傳遞與元素相關的數據
- 透過JavaScript訪問: 容易使用dataset API來訪問和修改數據
- 靈活性: 允許添加任何數據而不違反HTML標準
GO TO FULL VERSION