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">W3School 是最棒的！</h1>

</body>
</html>

亲自试一试

浏览器支持

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