为什么初始 CSS 样式在 DOM element.style 字段上不可见？答案

【问题标题】：why are initial CSS styles not visible on DOM element.style field?为什么初始 CSS 样式在 DOM element.style 字段上不可见？
【发布时间】：2019-01-23 06:54:32
【问题描述】：

好的，我完全期望因为提出一些愚蠢的问题（或至少是重复的）而被火焚烧，但是在附加的 sn-p 中，为什么我必须使用 window.getComputedStyle 来访问 CSS 应用的样式？我的印象是，.style 字段至少会反映 CSS 最初应用的那些样式，和/或此后手动更改的样式。

如果不是，控制哪些属性（以及何时）反映在元素的 .style 字段中的确切规则是什么？

setTimeout(() => {
    console.log("the bckg color:", reddish.style.backgroundColor);
    console.log("the width:", reddish.style.width);
    console.log("from a computed style:", window.getComputedStyle(reddish).backgroundColor);
    console.log("from a computed style:", window.getComputedStyle(reddish).width);
}, 100);

#reddish {
    background-color: #fa5;
    width: 100px;
    height: 100px;
}

<html>
    <body>
        <div id="reddish"></div>
    </body>
</html>

【问题讨论】：

标签： javascript css stylesheet getcomputedstyle

【解决方案1】：

HTMLElement.style 属性对完全没有用处了解应用于元素的样式，因为它代表只有 CSS 声明 设置在元素的内联样式中属性，而不是来自其他地方的样式规则，例如部分中的样式规则或外部样式表。要得到您应该使用的元素的所有 CSS 属性的值 Window.getComputedStyle() 代替。

通过-MDN Web Docs | Getting Style Information

HTMLElement.style:

HTMLElement.style 属性用于获取以及设置 内联样式 一个元素。

console.log(document.getElementById("para").style.fontSize); // will work since the "font-size" property is set inline
console.log(document.getElementById("para").style.color); // will not work since the "color" property is not set inline

#para {color: rgb(34, 34, 34);}

&lt;p id="para" style="font-size: 20px;"&gt;Hello&lt;/p&gt;

Window.getComputedStyle()：

然而，getComputedStyle() 方法返回一个包含元素所有 CSS 属性值的对象，在应用活动样式表并解决这些值可能包含的任何基本计算之后，因此从内联样式声明以及返回的 css 属性来自外部样式表。

console.log(window.getComputedStyle(document.getElementById("para")).fontSize); // will work
console.log(window.getComputedStyle(document.getElementById("para")).color); // will work

#para {
  color: rgb(34, 34, 34);
}

&lt;p id="para" style="font-size: 20px;"&gt;Hello&lt;/p&gt;

【讨论】：

您可能应该引用this paragraph。 Ps：编辑器支持引用块。
@Kaiido 确实。让我更新答案。感谢您的提醒。

【解决方案2】：

HTMLElement.style 用于inline style of an element。它不考虑CSS。这基本上只是直接在元素对象上设置或获取属性。

<div style="color: red;">Hello</div>

Window.getComputedStyle() 考虑到inline styles and CSS，在解决了级联、继承等之后。它基本上是用于在页面上呈现元素的“最终”实际样式值。

// CSS
#blue-text {
  color: blue !important;
}

// HTML
<div style="color: red;" id="blue-text">Hello</div>

// JS
const myElement = document.querySelector("#blue-text");
myElement.style.color; // "red" because that's the inline style
window.getComputedStyle(myElement).color; // "rgb(0, 0, 255)" because CSS !important overrides inline style

【讨论】：

好的，所以基本上，我可以信任HTMLElement.style，当且仅当： (a) 我正在访问内联定义的样式属性（并且未被某些!important CSS 声明覆盖)，或者 (b) 我正在访问以前通过 element.style.property = ... 设置的样式属性？
基本上是的。
@Labrador 这取决于您期望它的含义。您不能永远相信 Element.style 会返回 CSS 属性的应用值。它可以很好地被其他地方的 !important 规则覆盖，或者甚至只是像 "auto" 这样没有实际意义的一些值。
...除了使用element.style.property = ... 仍然不会覆盖!important CSS 样式，显然。所以规则真的是：使用HMTLElement.style就像编辑元素的内联style属性，仅此而已。（@Kaiido 我们的 cmets 越过了。谢谢。）