轻松上手,快乐学习!
HTML CSS JAVASCRIPT SQL PYTHON MYSQL PHP GIT 问答 工具 导航 更多 实例 参考

HTML id 属性


实例

通过 JavaScript 利用 id 属性来处理一段文本：

<html>
<body>

<h1 id="myHeader">Hello World!</h1>
<button onclick="displayResult()">更改文字</button>
<script>
function displayResult() {
  document.getElementById("myHeader").innerHTML = "祝你今天过得愉快！";
}
</script>

</body>
</html>
亲自试一试 »

下面有更多实例。

定义和用法

id 属性规定 HTML 元素的唯一的 id。

id 在 HTML 文档中必须是唯一的。

id 属性可用作链接锚（link anchor），通过 JavaScript（HTML DOM）或通过 CSS 为带有指定 id 的元素改变或添加样式。

浏览器支持

属性
id Yes Yes Yes Yes Yes

语法

<element id="id">

属性值

值 描述
id

规定元素的唯一 id。

命名规则：

  • 必须以字母 A-Z 或 a-z 开头
  • 其后的字符：字母(A-Za-z)、数字(0-9)、连字符("-")、下划线("_")、冒号(":") 以及点号(".")
  • 值对大小写敏感

更多实例

实例 1

使用 id 属性链接到页面中具有指定 id 的元素:

<html>
<body>

<h2><a id="top">Some heading</a></h2>

<p>Lots of text....</p>
<p>Lots of text....</p>
<p>Lots of text....</p>
<a href="#top">Go to top</a>

</body>
</html>
亲自试一试 »

实例 2

在 CSS 中使用 id 属性:

<html>
<head>
<style>
#myHeader {
  color: red;
  text-align: center;
}
</style>
</head>
<body>

<h1 id="myHeader">BEGTUT is the best!</h1>

</body>
</html>
亲自试一试 »

相关页面

HTML 教程: HTML id

HTML 教程: HTML 属性

CSS 教程: CSS 语法

CSS 参考手册: CSS #id Selector

HTML DOM 参考手册: HTML DOM getElementById() 方法

HTML DOM 参考手册: HTML DOM id 属性

HTML DOM 参考手册: HTML DOM Style 对象