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