Javascript 为什么初始CSS样式在DOM元素.style字段上不可见？

好吧，我完全希望问一些愚蠢的问题（或者至少是重复的问题）会引火烧身，但是在附加的代码片段中，为什么我必须使用

window.getComputedStyle

来访问CSS应用的样式呢？我的印象是，

.style

字段至少会反映最初由CSS应用和/或此后手动更改的样式

如果不是，那么在元素的

.style

字段中反映（以及何时）哪些属性的确切规则是什么

setTimeout（（）=>{
log（“bckg颜色：”，略带红色。样式。背景色）；
log（“宽度：”，略带红色。样式。宽度）；
log（“来自计算样式：”，window.getComputedStyle（略带红色）.backgroundColor）；
log（“来自计算样式：”，window.getComputedStyle（略带红色）.width）；
}, 100);
#略带红色{
背景色：#fa5；
宽度：100px；
高度：100px；
}
HTMLElement.style
用于。它没有考虑任何CSS。这基本上只是直接设置或获取元素对象的属性

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

HtmleElement.style属性对于完全复制不可用
了解应用于元素的样式，因为它代表
仅在元素的内联样式中设置CSS声明
属性，而不是来自其他地方的样式规则，例如
节中的样式规则或外部样式表。得到
您应该使用的元素的所有CSS属性的值
窗口。改为getComputedStyle（）

通过-


HTMLElement.style:

该属性用于获取元素的内联样式，以及设置元素的内联样式


console.log（document.getElementById（“para”）.style.fontSize）；//将工作，因为“字体大小”属性是内联设置的
console.log（document.getElementById（“para”）.style.color）；//将不起作用，因为“颜色”属性未内联设置
#第{段颜色：rgb（34,34,34）}
您好
好，所以基本上，我可以信任
HTMLElement.style
当且仅当以下任一情况：（a）我正在访问内联定义的样式属性（并且没有被某些
！重要的
CSS声明覆盖），或者（b）我正在访问以前通过
element.style.property=…
设置的样式属性？基本上是的。@Labrador，这取决于您期望它的含义。您永远不能信任Element.style返回CSS属性的应用值。它很可能被
覆盖！重要的
规则在其他地方，甚至只是一些没有实际意义的值，如
“auto”
…除非使用
元素.style.property=…
仍然不能覆盖
！显然，重要的是CSS样式。所以规则是：使用
hmtleelement.style
就像编辑元素的内联
style
属性，仅此而已。（@kaido我们的评论错了。谢谢。）你应该引用。Ps：编辑器中支持引号块。@确实是Kaido。让我更新答案。谢谢你的提醒。
// 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