为何DOM元素的style.backgroundColor可设置却无法读取初始值？

页面中有一个通过CSS设置为红色的div元素，使用JavaScript获取该元素后，打印元素时发现其style.backgroundColor属性无值，多次延迟打印也仅返回空字符串，但在控制台中执行target.style.backgroundColor = 'white'却能成功修改背景色，请问该现象的原因是什么？

• element.style对象仅能读取和修改元素的内联样式（即直接写在元素标签的style属性中的样式），无法获取通过外部样式表、内部<style>标签定义的CSS样式。你的div红色背景是通过非内联的CSS设置的，所以target.style.backgroundColor会返回空字符串。
• 当执行target.style.backgroundColor = 'white'时，本质是给元素添加了内联样式。由于内联样式的优先级高于外部/内部CSS定义的样式，因此会覆盖原来的红色背景，表现为修改成功。
• 如果需要获取元素最终渲染的实际样式值，应该使用getComputedStyle(target).backgroundColor方法，它能返回元素当前生效的所有样式，无论样式来源是内联、内部还是外部CSS。

内容的提问来源于stack exchange，提问作者ACJ