JS DOM操作无法获取display属性问题（获取非行内样式问题及解决办法）

在网上看了很多关于这个问题的解释，我也都去一一尝试了，写一篇自己的总结

先把代码贴出来吧：

 

最开始我用内部样式表为p标签添加了display：none属性，但是通过图一中红框语句获取到的值为“”，然后换了下面这种方式，获取到的值为null。后来我通过类添加该属性和通过外部样式表添加发现也一样。

 最后我发现只有行内样式可以获取到display的值，有两种方法：

第一，直接在标签内添加style="display: none;"；

第二，在JS为li元素循环注册点击事件时通过

来进行添加，这两种添加方式都有效。

这个地方的原理我并不能解释，有感兴趣的朋友可以去研究一下原理，研究出来了记得留言告诉我一下。

PS：之前在别的博客里发现有人写必须要通过id选择才可以，其实这里通过什么样的方法选择都是没问题的。

---------------------------------------------------------------------------------------------------------------------------------------------------------------------

更新一下，我又去了解了一下这一块知识，发现是所有的非行内样式都不能通过这种方法获取。但是可以通过window.getComputedStyle来获取。

关于window.getComputedStyle方法，有两个参数，分别element和pseudoElement。element为所要选取的元素，pseudoElement可选，伪类元素（当不查询伪类元素的时候可以忽略或者传入 null，这个我还不知道怎么用）

下面放一个样例，还有一个点就是获取到的值是带有单位的，例如我这里获取的height，返回值为字符串‘xxpx’；