为什么我获取不到这个css样式？js原生获取css样式总结

还是自己遇到的一个坑的总结吧！与其说是坑不如说自己学艺不精，让我先哭一会！！

需求

简单就是获取一个css的height

（好吧 就是一个这么简单的需求）

实践

好吧 长时间的JQ 我已经对原生无能了 让我默哀3秒！！！

document.querySelector('.className').style.height;

这个果然不生效 好吧 看来我真的倒退不少！让我再哭一会！！（哭你妹 快去总结）

在学习中发现 其实js原生获取css的方法很多，上面写的就是其中一种，只不过情景不对啊！

getComputedStyle

• 说明 一个可以获取当前元素所有最终使用的CSS属性值。返回的是一个CSS样式声明对象([object CSSStyleDeclaration])

简单来说 读出你八辈祖宗的一个方法。

• 语法 window.getComputedStyle(dom, '伪元素')

看到伪元素、我就懵逼了 我只知道伪类啊 这有神马区别？

伪元素 其实就是 ::before :: after :: first-line ::first-letter ::content 等等
伪类 :hover :link :first-child :active 等等

• 用法

var oImg = document.getElementById('photo');

window.getComputedStyle(oImg, null).height;

dom.style

• 说明 获取元素style属性中的CSS样式， 简单说就是 能读能写 只能读你的外表

• 语法 dom.style.样式名称

• 用法

var oImg = document.getElementById('photo');

oImg.style.height;  // 只能获取css 样式表的

currentStyle

• 说明 返回的是元素当前应用的最终CSS属性值（包括外链CSS文件，页面中嵌入的