display:none在HTML和CSS中是否有差异？两种设置取值不同的原因

首先明确：两种写法的display:none功能完全一致，都会将元素隐藏，差异只体现在JS的获取方式上，原因如下：

• 当你在HTML元素的style属性里写display:none时，这个样式属于内联样式，会直接被挂载到DOM元素的style对象上，所以通过document.getElementById("test").style.display可以直接读取到none。
• 而在<style>标签（或外部样式表）中定义的#test{ display: none; }属于样式表规则，这类样式不会直接存入DOM元素的style属性里。element.style这个API只能读取元素的内联样式内容，所以第二个例子里会输出空字符串，看起来像是“无法获取”。

如果要获取元素最终生效的计算样式（不管是内联还是样式表定义的），可以使用getComputedStyle()方法，示例代码：

console.log(getComputedStyle(document.getElementById("test")).display)

执行这段代码，就能得到none的结果。

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