HTML id 属性 详解
HTML基础 2022-06-02 13:00:23小码哥的IT人生shichen
HTML id 属性
实例
通过 JavaScript 利用 id 属性来改变一段文本：
<html>
<head>
<script type="text/javascript">
function change_header()
{
document.getElementById("myHeader").innerHTML="Nice day!";
}
</script>
</head>
<body>
<h1 id="myHeader">Hello World!</h1>
<button onclick="change_header()">Change text</button>
</body>
</html>
完整实例【亲自试一试】：
<html>
<head>
<script type="text/javascript">
function change_header()
{
document.getElementById("myHeader").innerHTML="Nice day!";
}
</script>
</head>
<body>
<h1 id="myHeader">Hello World!</h1>
<button onclick="change_header()">Change text</button>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
（可以在本页底部找到更多实例）
定义和用法
id 属性规定 HTML 元素的唯一的 id。
id 在 HTML 文档中必须是唯一的。
id 属性可用作链接锚（link anchor），通过 JavaScript（HTML DOM）或通过 CSS 为带有指定 id 的元素改变或添加样式。
支持
W3C: "W3C" 列指示 W3C 的 HTML/XHTML 推荐标准中是否定义了该属性。
| IE | Firefox | Opera | Safari | W3C |
|---|---|---|---|---|
| YES | YES | YES | YES | YES |
语法
<element id="value">
属性值
| 值 | 描述 |
|---|---|
| id | 规定元素的唯一 id。 |
亲自试一试 - 实例
完整实例【向 HTML 元素添加唯一的 id】：
<html>
<body>
<h1 id="myHeader">phpcodeweb is the best!</h1>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
如何向 HTML 元素添加 id 属性。
完整实例【在 CSS 中使用 id 属性】：
<html>
<head>
<style>
#myHeader
{
color:red;
text-align:center;
}
</style>
</head>
<body>
<h1 id="myHeader">phpcodeweb is the best!</h1>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
如何在 CSS 中使用 id 属性
