HTML id 屬性

定義和用法

id 屬性規定 HTML 元素的唯一的 id。（該值在 HTML 文檔中必須是唯一的）。

id 屬性最常用于指向樣式表中的樣式，以及利用 JavaScript（通過 HTML DOM）操作具有特定 id 的元素。

id 屬性也可用作鏈接錨（link anchor）。

另請參閱：

HTML 教程：HTML id

HTML 教程：HTML 屬性

CSS 教程：CSS 語法

CSS 參考手冊：CSS #id 選擇器

HTML DOM 參考手冊：HTML DOM getElementById() 方法

HTML DOM 參考手冊：HTML DOM id 屬性

HTML DOM 參考手冊：HTML DOM Style 對象

實例

例子 1

使用 id 屬性通過 JavaScript 來改變一段文本：

<html>
<body>
<h1 id="myHeader">Hello World!</h1>
<button onclick="displayResult()">Change text</button>
<script>
function displayResult() {
  document.getElementById("myHeader").innerHTML = "Have a nice day!";
}
</script>
</body>
</html>

親自試一試

頁面下方提供更多實例。

語法

<element id="id">

屬性值

值 描述
id

為元素指定一個唯一的 id。命名規則：

  • 必須包含至少一個字符
  • 不能包含任何空格字符

更多實例

例子 2

使用 id 屬性鏈接到頁面內擁有指定 id 的元素：

<html>
<body>
<h2><a id="top">某個標題</a></h2>
<p>很多很多文本 ....</p>
<p>很多很多文本 ....</p>
<p>很多很多文本 ....</p>
<a href="#top">返回頂部</a>
</body>
</html>

親自試一試

例子 3

使用 id 屬性通過 CSS 樣式化文本：

<html>
<head>
<style>
#myHeader {
  color: red;
  text-align: center;
}
</style>
</head>
<body>
<h1 id="myHeader">CodeW3C.com 是最棒的！</h1>
</body>
</html>

親自試一試

瀏覽器支持

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
支持 支持 支持 支持 支持