前端开发使用js获取css属性的方法

在某些情况下，我们会需要利用js获取元素的css属性。
css有三种形式
内联样式 <p style=”color:red;” id=”text”>需要获取属性</p>
内部样式 <style type=”text/css”>

text{

color: blue;
}
</style>

外部样式 <link rel=”stylesheet” type=”text/css” href=”index.css”>
通常情况下，我们可以通过Element.style.xxxx方法来获取css属性
html 代码

可以看到，上述方法可成功获得css属性值，但是，这个方法只能获得内联的css属性
html 代码

可以看到，只要我们把css样式改为内部样式或者外部样式，就不能获取到css属性了。但在大多数时候，我们的样式表都是使用外部或内部样式。
在这种情况下，我们就可以使用window.getComputedStyle(“元素”, “伪类”);来获取css样式，伪类如果没有定义的话，可设置为null
html 代码

这样就能成功获取外部或内部的css属性值了。经过作者验证，这个方法目前在IE11浏览器中也是可用的，可能新版本IE已经支持了。
对于不支持的IE浏览器，我们可使用element.currentStyle.xxx;方法
如以上例子，可写为var textcolor=text.currentStyle.color;
注：currentStyle和getComputedStyle都是只读形式，也就是，只能获取css属性值，而不能通过它们设置css属性值。