CSSStyleProperties - Web API | MDN

例項屬性

此介面還繼承了其父介面 CSSStyleDeclaration 的屬性。

命名屬性: 瀏覽器支援的所有 CSS 屬性的短橫線命名和駝峰式命名屬性。
CSSStyleProperties.cssFloat: float CSS 屬性的特殊別名。

描述

此型別的物件具有瀏覽器支援的所有 CSS 屬性的短橫線命名屬性，包括簡寫屬性和長寫法屬性，以及帶有 -moz 和 -webkit 字首的屬性。這些屬性可以透過從 CSSStyleDeclaration 基類繼承的方法來訪問，例如 getPropertyValue() 和 setPropertyValue()。

此外，每個短橫線命名屬性都有一個對應的駝峰式命名屬性，其名稱是透過刪除連字元並將第一個單詞後的每個單詞大寫來生成的。例如，這允許您使用 style.marginTop 語法（其中 style 是一個 CSSStyleProperties 物件）來訪問 margin-top CSS 屬性，而不是使用更繁瑣的 style.getPropertyValue("margin-top") 或 style["margin-top"]。CSS 屬性 float 是 JavaScript 的保留關鍵字，因此它由 cssFloat 屬性表示。

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

沒有定義值的屬性和特性預設為空字串 ("")。對於表示內聯樣式宣告（非計算樣式）的物件，這將是宣告塊中未定義的任何樣式。

CSSStyleProperties 物件例項透過以下 API 公開

HTMLElement.style、SVGElement.style 和 MathMLElement.style：用於獲取和設定單個元素的內聯樣式（例如，<div style="…">）。
Window.getComputedStyle()：用於獲取元素的（只讀）計算樣式，它包括內聯樣式和外部樣式的效果。
CSSStyleRule.style：用於獲取和設定樣式規則（CSSStyleRule）的樣式。

示例

基本用法

此示例演示瞭如何使用駝峰式和短橫線命名屬性來獲取和設定元素的本地和計算樣式。

HTML

HTML 定義了一個 <div> 元素，該元素具有多個設定的樣式，並巢狀在另一個設定了 font-weight 為 bold 的元素中。

html

<div style="font-weight: bold;">
  <div style="border-top: 3px solid blue; color: red;margin:5px;" id="elt">
    Div content.
    <br />
    Inner: "border-top: 3px solid blue; color: red;margin:5px;".
    <br />
    Outer: "font-weight: bold;"
  </div>
</div>

<pre id="log"></pre>

#log {
  height: 140px;
  overflow: scroll;
  padding: 0.5rem;
  border: 1px solid black;
}

JavaScript

const logElement = document.querySelector("#log");
function log(text) {
  logElement.innerText = `${logElement.innerText}${text}\n`;
  logElement.scrollTop = logElement.scrollHeight;
}

首先獲取 ID 為 "elt" 的元素的本地和計算樣式。

const element = document.querySelector("#elt");
const elementStyle = element.style;
const computedStyle = window.getComputedStyle(element);

然後，我們使用點表示法獲取 CSSStyleProperties 的 borderTop 簡寫屬性，用於本地和計算樣式。使用點表示法和駝峰式屬性是訪問任何屬性的最簡單方法。

// Get style using dot notation
const elem_borderTop = elementStyle.borderTop;
const comp_borderTop = computedStyle.borderTop;

log('Format: Style = "Element" / "Computed"');
log(`"borderTop" = "${elem_borderTop}" / "${comp_borderTop}"'`);

我們還可以使用 getPropertyValue() 方法或括號表示法來獲取相同的屬性。

// Get style using dashed-name property value
const elem_border_top = elementStyle.getPropertyValue("border-top");
const comp_border_top = computedStyle.getPropertyValue("border-top");
log(`"border-top" = "${elem_border_top}" / "${elem_border_top}"'`);

以下程式碼使用點表示法（為簡化起見）獲取與 border-top 簡寫屬性相對應的每個長寫法屬性。

// Get shorthand properties using dot notation
const elem_borderTopWidth = elementStyle.borderTopWidth;
const comp_borderTopWidth = computedStyle.borderTopWidth;
log(`"borderTopWidth" = "${elem_borderTopWidth}" / "${comp_borderTopWidth}"'`);

const elem_borderTopColor = elementStyle.borderTopColor;
const comp_borderTopColor = computedStyle.borderTopColor;
log(`"borderTopColor" = "${elem_borderTopColor}" / "${comp_borderTopColor}"'`);

const elem_borderTopStyle = elementStyle.borderTopStyle;
const comp_borderTopStyle = computedStyle.borderTopStyle;
log(`"borderTopStyle" = "${elem_borderTopStyle}" / "${comp_borderTopStyle}"'`);

const elem_fontWeight = elementStyle.fontWeight;
const comp_fontWeight = computedStyle.fontWeight;
log(`"fontWeight" = "${elem_fontWeight}" / "${comp_fontWeight}"'`);

最後，我們演示瞭如何使用點表示法來設定屬性值。在下面的結果部分，您會注意到元素的底部邊框是一條實線綠色。

// Set the bottom border style using dot notation
elementStyle.borderBottom = "5px solid green";

結果

結果如下。請注意，對應的駝峰式（borderTop）和短橫線命名（border-top）屬性的值是相同的。長寫法屬性的本地和計算值通常也相同，只是計算屬性使用 rgb() 語法表示顏色，並且還包括父 <div> 上設定的樣式，例如 font-weight。

列舉短橫線命名樣式屬性

此示例演示瞭如何列舉元素的短橫線命名屬性值，包括內聯樣式和計算樣式。

HTML

HTML 定義了一個 <div> 元素，該元素具有多個設定的樣式，並巢狀在另一個設定了 font-weight 的元素中。還有按鈕用於獲取元素的內聯樣式和計算樣式（以及用於重置按鈕和日誌記錄的隱藏程式碼）。

html

<div style="font-weight: bold;">
  <div style="border-top: 1px solid blue; color: red;" id="elt">
    An example div
  </div>
</div>
<button id="inline_style" type="button">Inline Style</button>
<button id="computed_style" type="button">Computed Style</button>

<button id="reset" type="button">Reset</button>
<pre id="log"></pre>

#log {
  height: 300px;
  overflow: scroll;
  padding: 0.5rem;
  border: 1px solid black;
}

const logElement = document.querySelector("#log");
function log(text) {
  logElement.innerText = `${logElement.innerText}${text}\n`;
  logElement.scrollTop = logElement.scrollHeight;
}

function clearLog(text) {
  logElement.innerText = "";
}

const reload = document.querySelector("#reset");

reload.addEventListener("click", () => {
  clearLog();
});

JavaScript

程式碼首先定義了我們將用於列舉 ID 為 elt 的元素的屬性的函式。該函式使用 CSSStyleDeclaration.getPropertyValue() 來獲取物件擁有的每個具有數字索引的短橫線命名屬性的值。

function getPopulatedProperties(elementStyles) {
  for (const prop in elementStyles) {
    if (
      // Check the property belongs to the CSSStyleProperties instance
      // Check property has a numeric index (indicates inline/dash-named style)
      Object.hasOwn(elementStyles, prop) &&
      !Number.isNaN(Number.parseInt(prop, 10))
    ) {
      log(
        `${elementStyles[prop]} = '${elementStyles.getPropertyValue(
          elementStyles[prop],
        )}'`,
      );
    }
  }
}

以下程式碼檢查並記錄 CSSStyleProperties 是否已定義。如果存在，我們就建立按鈕事件處理程式來獲取元素的內聯或計算樣式，並記錄它們的名稱和值。

if (typeof window.CSSStyleProperties === "undefined") {
  log("CSSStyleProperties is not supported on this browser.");
} else {
  const element = document.querySelector("#elt");

  const inlineStyle = document.querySelector("#inline_style");
  inlineStyle.addEventListener("click", () => {
    clearLog();
    const elementStyle = element.style;
    getPopulatedProperties(elementStyle);
  });

  const computedStyle = document.querySelector("#computed_style");
  computedStyle.addEventListener("click", () => {
    clearLog();
    const compStyles = window.getComputedStyle(element);
    getPopulatedProperties(compStyles);
  });
}

結果

按下按鈕以顯示元素內聯樣式和計算樣式的短橫線命名屬性名稱和值。請注意，內聯樣式僅包含在實際元素上定義的樣式：所有其他屬性的值均為 "" 並且不顯示。計算樣式還包括在父元素上定義的 font-weight，以及許多其他計算樣式。

規範

規範
CSS 物件模型 (CSSOM) # cssstyleproperties

瀏覽器相容性

幫助改進 MDN

瞭解如何貢獻

此頁面最後修改於 2025年10月14日，由 MDN 貢獻者修改。

在 GitHub 上檢視此頁面 • 報告此內容的錯誤