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 上查看此页面 • 报告此内容的错误