Question

好吧，我完全有理由问一些愚蠢（或至少重复）的问题，但是在所附的代码片段中，为什么我必须使用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>

Answer 1

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

Answer 2

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

通过-MDN Web Docs | Getting Style Information

HTMLElement.style：

HTMLElement.style属性用于获取以及 set 元素的内联样式。

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);}

<p id="para" style="font-size: 20px;">Hello</p>

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);
}

<p id="para" style="font-size: 20px;">Hello</p>

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

2 个答案: