Window: getComputedStyle() 方法

Baseline 已廣泛支援

此特性已相當成熟，可在許多裝置和瀏覽器版本上使用。自 ⁨2015 年 7 月⁩以來，各瀏覽器均已提供此特性。

Window.getComputedStyle() 方法返回一個即時的只讀 CSSStyleProperties 物件，其中包含元素所有 CSS 屬性的已解析值，這些值是在應用活動樣式表並解析其中可能包含的任何計算之後得出的。

語法

getComputedStyle(element)
getComputedStyle(element, pseudoElt)

引數

element: 要獲取計算樣式的 Element。
pseudoElt 可選: 一個字串，指定要匹配的偽元素。對於實際元素則省略（或為 null）。

返回值

一個即時 CSSStyleProperties 物件，當元素樣式改變時會自動更新。

注意：規範的早期版本返回的是 CSSStyleDeclaration（CSSStyleProperties 派生自它）。有關瀏覽器支援資訊，請參見瀏覽器相容性表。

警告：返回的值有時是故意不準確的。為避免“CSS 歷史洩露”安全問題，瀏覽器可能會謊報已訪問連結的計算樣式，返回的值就好像使用者從未訪問過該連結的 URL 一樣。請參閱彌補 CSS 歷史洩露和CSS :visited 即將推出的隱私相關更改，瞭解此實現的示例。

異常

TypeError: 如果傳入的物件不是 Element，或者 pseudoElt 不是有效的偽元素選擇器，或者為 ::part() 或 ::slotted()。

注意：“有效的偽元素選擇器”指語法上的有效性，例如 ::unsupported 被認為是有效的，即使偽元素本身不受支援。

描述

該方法返回一個即時的只讀 CSSStyleProperties 物件，其中包含元素所有 CSS 屬性的已解析值，這些值是在應用活動樣式表並解析其中可能包含的任何計算之後得出的。

返回的物件可用於檢查元素的樣式——包括那些內聯設定的、使用 <style> 元素設定的，或透過外部樣式表設定的樣式。由於該物件是隻讀的，因此您無法使用它來設定元素的樣式。但是，由於它是“即時”的，如果您使用另一個 API（例如 HTMLElement.style）更新元素樣式，返回的物件將使用相應的已解析值進行更新。

該物件包含已解析值的區別很重要。對於大多數屬性，特別是那些依賴於佈局的屬性，例如 display、font-size 或 line-height，已解析值就是計算值。對於依賴於佈局的屬性，使用值可能與計算值略有不同，這就是作為已解析值返回的值。對於動畫屬性值，它將是動畫當前點的計算值。

返回的物件包含瀏覽器支援的所有 CSS 屬性的以短橫線命名和相應的駝峰命名屬性，包括簡寫屬性和長寫屬性。

元素的簡寫 CSS 屬性會擴充套件為相應的長格式屬性。例如，樣式為 "border-top: 1px solid black" 的元素將在返回的物件中表示為名為 border-top 和 borderTop 的屬性，以及相應的長寫屬性 border-top-color 和 borderTopColor、border-top-style 和 borderTopStyle、以及 border-top-width 和 borderTopWidth。

請注意，返回的物件與元素 style 屬性返回的物件型別相同。但是，element.style 物件也可以用於設定該元素的樣式，並且只返回內聯樣式或透過 JavaScript 設定的樣式。

HTML

html

<p>Hello</p>

CSS

css

p {
  width: 400px;
  margin: 0 auto;
  padding: 20px;
  font: 2rem/2 sans-serif;
  text-align: center;
  background: purple;
  color: white;
}

JavaScript

const para = document.querySelector("p");
const compStyles = window.getComputedStyle(para);
para.textContent =
  `My computed font-size is ${compStyles.getPropertyValue("font-size")},\n` +
  `and my computed line-height is ${compStyles.getPropertyValue(
    "line-height",
  )}.`;

結果

與偽元素一起使用

getComputedStyle() 可以從偽元素中提取樣式資訊，例如 ::after、::before、::marker 或 ::line-marker。

html

<h3>Generated content</h3>

css

h3::after {
  content: " rocks!";
}

const h3 = document.querySelector("h3");
const result = getComputedStyle(h3, "::after").content;

console.log("the generated content is: ", result); // returns ' rocks!'