为什么初始的CSS样式在DOM element.style字段中不可见？ [英] why are initial CSS styles not visible on DOM element.style field?
本文介绍了为什么初始的CSS样式在DOM element.style字段中不可见？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
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>推荐答案
HTMLElement.style属性对完全 了解应用于元素的样式，因为它表示 只有在元素的内联样式中设置的CSS声明 属性，而不是来自其他地方样式规则的属性，如 节中的样式规则或外部样式表。为了得到 您应该使用的元素的所有css属性的值 改为Window.getComputedStyle()。
VIA-MDN Web Docs|获取样式 信息
HTMLElement.style：
HTMLElement.style属性用于获取以及设置元素的内联样式。
数据-lang="js"数据-隐藏="假"数据-控制台="真"数据-巴贝尔="假">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属性。
数据-lang="js"数据-隐藏="假"数据-控制台="真"数据-巴贝尔="假">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 element.style字段中不可见？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
