当前位置：文江博客知识库简体中文文档 Web API HTMLElement style

HTMLElement.style - Web API 接口参考编辑

HTMLElement.style 属性返回一个 CSSStyleDeclaration 对象，表示元素的内联style 属性（attribute），但忽略任何样式表应用的属性。通过 style 可以访问的 CSS 属性列表，可以查看 CSS Properties Reference。

由于 style 属性的优先级和通过style设置内联样式是一样的，并且在css层级样式中拥有最高优先级，因此在为特定的元素设置样式时很有用。

设置 style 属性

注意不能通过直接给style属性设置字符串（如：elt.style = "color: blue;"）来设置style，因为style应被当成是只读的（尽管Firefox(Gecko), Chrome 和 Opera允许修改它），这是因为通过style属性返回的CSSStyleDeclaration对象是只读的。但是style属性本身的属性能够用来设置样式。此外，通过单独的样式属性（如elt.style.color = '...'）比用elt.style.cssText = '...' 或者 elt.setAttribute('style', '...')形式更加简便，除非你希望完全通过一个单独语句来设置元素的全部样式，因为通过style本身属性设置的样式不会影响到通过其他方式设置的其他css属性的样式。

例子

// 在单个语句中设置多个样式
elt.style.cssText = "color: blue; border: 1px solid black";
// 或者
elt.setAttribute("style", "color:red; border: 1px solid blue;");

// 设置特定样式，同时保持其他内联样式值不变
elt.style.color = "blue";

获取元素样式信息

通常，要了解元素样式的信息，仅仅使用 style 属性是不够的，这是因为它只包含了在元素内嵌 style 属性（attribute）上声明的的 CSS 属性，而不包括来自其他地方声明的样式，如 <head> 部分的内嵌样式表，或外部样式表。要获取一个元素的所有 CSS 属性，你应该使用 window.getComputedStyle()。

<!DOCTYPE HTML>
<html>
<body style="font-weight:bold;">

    <div style="color:red" id="myElement">..</div>

 </body>
</html>

下面的代码输出 style 所有属性的名字，以及为元素 elt 显式设置的属性值和继承的计算值（computed value）：

var element = document.getElementById("myElement");
var out = "";
var elementStyle = element.style;
var computedStyle = window.getComputedStyle(element, null);

for (prop in elementStyle) {
  if (elementStyle.hasOwnProperty(prop)) {
    out += "  " + prop + " = '" + elementStyle[prop] + "' > '" + computedStyle[prop] + "'\n";
  }
}
console.log(out)

输出结果如下:

...
fontWeight = '' > 'bold'
color = 'red' > 'rgb(255, 0, 0)'
...

请注意，计算样式中font-weight的值为“bold”，元素的style属性中缺少该值

规范

DOM Level 2 Style: ElementCSSInlineStyle.style

CSSOM: ElementCSSInlineStyle

兼容性

BCD tables only load in the browser

The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.

HTMLElement.style - Web API 接口参考编辑

设置 style 属性

例子

获取元素样式信息

规范

兼容性

相关链接

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

词条统计

友情链接

HTMLElement.style - Web API 接口参考 编辑

设置 style 属性

例子

获取元素样式信息

规范

兼容性

相关链接

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

词条统计

友情链接

HTMLElement.style - Web API 接口参考编辑

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。