HTML id 全局属性

试一试

<p>A normal, boring paragraph. Try not to fall asleep.</p>

<p id="exciting">The most exciting paragraph on the page. One of a kind!</p>

#exciting {
  background: linear-gradient(to bottom, #ffe8d4, #f69d3c);
  border: 1px solid dimgrey;
  padding: 10px;
  border-radius: 10px;
  box-shadow: 2px 2px 1px black;
}

#exciting::before {
  content: "ℹ️";
  margin-right: 5px;
}

语法

ID 属性的值不能包含 ASCII 空白字符。浏览器会将包含空白字符的不符合规范的 ID 视为空白字符是 ID 的一部分。与允许空格分隔值的 class 属性不同，元素只能有一个单一的 ID 值。

技术上讲，ID 属性的值可以包含任何其他 Unicode 字符。但是，当在 CSS 选择器中使用时，无论是通过 JavaScript 使用诸如 Document.querySelector() 等 API，还是在 CSS 样式表中，ID 属性值都必须是有效的 CSS 标识符。这意味着，如果 ID 属性值不是有效的 CSS 标识符（例如，my?id 或 1234），则在使用它进行选择时必须对其进行转义，可以使用 CSS.escape() 方法或 手动 进行转义。

因此，建议开发者为 ID 属性选择不需要转义且是有效 CSS 标识符的值。

此外，并非所有有效的 ID 属性值都是有效的 JavaScript 标识符。例如，1234 是一个有效的属性值，但不是一个有效的 JavaScript 标识符。这意味着该值不是一个有效的变量名，因此您不能通过 window.1234 这样的代码访问该元素。但是，您可以使用 window["1234"] 来访问它。

描述

ID 属性的目的是在链接（使用 片段标识符）、脚本或样式（使用 CSS）时标识单个元素。

您可以将具有 ID 属性的元素作为 window 对象的全局属性来访问，其中属性名是 ID 值，属性值是相应的元素。例如，给定以下标记

<p id="preamble"></p>

您可以使用以下 JavaScript 代码访问此段落元素

const content = window.preamble.textContent;

规范

浏览器兼容性

另见

• 所有 全局属性。
• 反映此属性的 Element.id。
• Document.getElementById 方法。
• CSS ID 选择器。