好吧，我完全有可能因为问了一些愚蠢的问题（或者至少是重复的问题）而大发雷霆，但是在附加的片段中，为什么我必须使用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>
2条答案
按热度按时间pjngdqdw1#
HTMLElement.style属性对于完全了解应用在元素上的样式没有用处，因为它只表示元素的inline style属性中设置的CSS声明，而不是来自其他地方的样式规则，例如节中的样式规则，或外部样式表。要获取元素的所有CSS属性的值，您应该使用Window.getComputedStyle（）。
通过- MDN Web Docs|获取样式信息
HTMLElement.style：
HTMLElement.style属性用于***获取***以及*设置*元素的inline style。
Window.getComputedStyle（）：
然而，getComputedStyle()方法返回一个包含元素的所有CSS属性值的对象，在应用活动样式表并解决这些值可能包含的任何基本计算之后，从而从内联样式声明以及外部样式表返回css属性。
一个一个三个一个一个一个一个一个四个一个一个一个一个一个五个一个
iecba09b2#
HTMLElement.style是针对inline style of an element的。它没有考虑任何CSS。这基本上只是直接设置或获取元素对象的属性。Window.getComputedStyle()考虑了inline styles and CSS，在解决了级联，继承等问题之后，它基本上是用于在页面上呈现元素的“最终”实际样式值。