当我们的样式写在行间的时候,JS可以通过style获取,
然而style也只能获取或操作行间样式,当我们需要获取非行间的样式时,
应该采用什么方法呢?
首先定义一个div并为他设置样式:
<style>
#div1{100px;height:100px;border:1px solid red;}
</style>
<div id="div1"></div>
在IE下:currentStyle用于获取非行间的样式
<script> var oDiv=document.getElementById("div1"); console.log(oDiv.currentStyle.width); </script>
但是他不兼容火狐,火狐下用的方法是getComputedStyle(obj,false);
第一个参数是要获取的元素,第二个参数随意设置
console.log(getComputedStyle(oDiv,false).width);
但是这样一来IE7又不兼容了,我们可以通过If语句判断实现浏览器的兼容
function getStyle(obj,name){ if(obj.currentStyle){
//IE return obj.currentStyle[name]; }else{
//火狐 return getComputedStyle(obj,false)[name]; } }
但是需要注意的是,我们输入参数不能是复合样式,例如background
如果我们要获取背景颜色,输入的参数不能是background而是他下面的单一样式backgroundColor