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

mayufo commented 8 years ago

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

需求

简单就是获取一个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文件，页面中嵌入的<style>属性等）与getComputedStyle那个读你八辈祖宗的很像，但是不能获取伪元素。且他们获取的属性也有很大差异。
语法 element.currentStyle.样式
用法

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

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

getPropertyValue和getAttribute

说明可以获取CSS样式申明对象上的属性值（直接属性名称）， getPropertyValue可以不用驼峰，直接用其属性名 getAttribute主要是为了兼容IE获取属性值,需要驼峰的写法
语法 getPropertyValue("background-color") getAttribute("backgroundColor")
用法

var oImg = document.getElementById('photo');
var oStyle = oImg.currentStyle? oImg.currentStyle : window.getComputedStyle(oImg, null); 
oStyle.getPropertyValue("background-color")
oStyle.getAttribute("backgroundColor")

总结

如果我想获取某个属性值可以比如高度 ? (dom.currentStyle? dom.currentStyle : window.getComputedStyle(dom, null)).height;

如果是复合的某个属性获取？ (oImg.currentStyle? oImg.currentStyle : window.getComputedStyle(oImg, null)).getPropertyValue("background-color")

如果我想给这个属性重新设置这个高度？可以先用上面方法取到，然后用 dom.style.height = XX + 'px'; 如果是复合的属性值，请注意是驼峰的写法！

其实在看了这些以后，我用了上面的这个方法我依然没有获取到这个图片的高度？为什么啊？

因为图片存在一个加载的问题，你刚进来获取当然无法获取到？其实可以用onload事件来解决，具体还有其他更多的方法。

mmmaming commented 8 years ago

所以最终获取不到样式的原因是图片加载的问题导致的？。。。你这个标题炫技党。

mayufo commented 8 years ago

@mmmaming 被你发现了

XIANFESchool / FE-problem-collection