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
支持 支持 支持 支持 支持