二维码

HTML id 属性

HTML id 属性

使用 HTML 属性 为 HTML 元素指定唯一 ID。id

不能有多个具有相同 id 的元素 HTML 文档。

使用 id 属性

该属性指定唯一 ID 对于 HTML 元素。该属性的值在 HTML 文档中必须是唯一的。id``id

该属性用于指向 添加到样式表中的特定样式声明。JavaScript 也使用它来访问和 使用特定 ID 操作元素。id

id 的语法是:写一个哈希字符 (#),后跟一个 id 名称。 然后,在大括号 {} 中定义 CSS 属性。

在下面的示例中,我们有一个指向 ID 名称 “我的标头”。此元素将根据 head 部分中的样式定义设置样式:<h1>``<h1>``#myHeader

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<html>
<head>
<style>
#myHeader {
background-color: lightblue;
  color: black;
  padding: 40px;
  text-align: center;
}
</style>
</head>
<body>

<h1 id="myHeader">My Header</h1>

</body>
</html>

注意: id 名称区分大小写!

注意: ID 名称必须至少包含一个 字符,不能以数字开头,并且不得包含空格(空格、制表符、 等)。

类和 ID 之间的区别

一个 类名可以由多个 HTML 元素使用,而 id 名只能 由一个 HTML 元素使用 在页面内:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<style>  
/* Style the element with the id "myHeader" */
**#myHeader** {  background-color: lightblue;
  color: black;
  padding: 40px;
  text-align: center;
}

/* Style all elements with the class name "city" */
**.city** {  background-color: tomato;
  color: white;
  padding: 10px;
}
</style>

<!-- An element with a unique id -->
<h1 id="myHeader">My Cities</h1>

<!-- Multiple elements with same class -->
<h2 class="city">London</h2>
<p>London is the capital of England.</p>

<h2 class="city">Paris</h2>
<p>Paris is the capital of France.</p>

<h2 class="city">Tokyo</h2>
<p>Tokyo is the capital of Japan.</p>

提示: 您可以在我们的 [CSS 教程中了解有关 CSS] 的更多信息。

带有 ID 和链接的 HTML 书签

HTML 书签用于允许读者跳转到网页的特定部分。

如果您的页面很长,书签会很有用。

若要使用书签,必须先创建书签,然后添加链接 到它。

然后,当单击该链接时,页面将滚动到带有 书签。

首先,创建一个具有以下属性的书签:id

1
<h2 id="C4">Chapter 4</h2>

然后,在同一页面中添加指向书签的链接(“跳转到第 4 章”):

1
<a href="#C4">Jump to Chapter 4</a>

或者,从另一个页面添加书签链接(“跳转到第 4 章”):

1
<a href="html_demo.html#C4">Jump to Chapter 4</a>

在 JavaScript 中使用 id 属性

JavaScript 也可以使用该属性来执行 该特定元素的一些任务。id

JavaScript 可以使用以下方法访问具有特定 id 的元素:getElementById()

1
2
3
4
5
6
7
使用该属性通过 JavaScript 操作文本:`id`

<script>
function displayResult() {
  document.getElementById("myHeader").innerHTML = "Have a nice day!";
}
</script>

提示: 在 [HTML]JavaScript 章节或我们的 [JavaScript 教程中学习 JavaScript]。

本章小结

  • 该属性用于指定唯一 ID 对于 HTML 元素id
  • 该属性的值在 HTML 文档中必须是唯一的id
  • CSS 和 JavaScript 使用该属性来设置/选择特定元素的样式id
  • 该属性的值区分大小写id
  • 该属性还用于创建 HTML 书签id
  • JavaScript 可以使用以下方法访问具有特定 id 的元素getElementById()