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 選擇器。