5

OK、何かばかげた (または少なくとも重複した) ことを尋ねると炎上することを完全に期待していますが、添付のスニペットでは、window.getComputedStyleCSS によって適用されたスタイルにアクセスするために使用する必要があるのはなぜですか? .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>

4

2 に答える 2