HTML 简明教程 ( HTML5 标准 ) - id 属性

HTML 中，可以使用 id 属性为 HTML 元素添加一个唯一标识符，id 必须在 HTML 文档中是唯一存在的

在 CSS 中，使用 #id 命令选择 HTML 元素并为其定义样式

在 JavaScript 中，我们可以调用 document.getElementById(id) 方法来查找 HTML 元素

id 属性语法

每个 html 元素都可以定义一个 id 属性

下面的示例中，我们为 <h1> 元素添加了一个 id 属性，并为该 id 定义一个样式

<style>
#articleTitle {
    background-color: lightblue;
    color: black;
    padding: 40px;
    text-align: center;
}
</style>

<h1 id="articleTitle">我的第一篇文章</h1>

注意： id 属性的值是区分大小写的，且不能以数字开头和包含空格

id 属性和 class 属性的不同之处

HTML 文档中每个元素的 id 必须是唯一的，但是，多个 HTML 元素可以定义相同的 class 属性

例如

<style>
/* id 为 "myHeader" 的样式 */
#myHeader {
    background-color: lightblue;
    color: black;
    padding: 40px;
    text-align: center;
}

/* 具有 "city" 类的元素的样式 */
.city {
    background-color: tomato;
    color: white;
    padding: 10px;
}
</style>

<!-- 唯一的元素 -->
<h1 id="myHeader">我的城市</h1>

<!-- 多个相类似的元素 -->
<h2 class="city">伦敦</h2>
<p>伦敦是英格兰的首都</p>

<h2 class="city">巴黎</h2>
<p>巴黎是法国的首都</p>

<h2 class="city">东京</h2>
<p>东京是日本的首都</p>

在 JavaScript 中查找带有指定 id 属性的 HTML 元素

下面的示例中，我们使用 JavaScript 来更改 id 值为 myHeader 的元素的文本内容

<script>
function displayResult() {
    document.getElementById("myHeader").innerHTML = "HTML is so easy!";
}
</script>