火狐浏览器 window.getComputedStyle()返回值的问题

来源:互联网 发布:江西江铃集团 知乎 编辑:程序博客网 时间:2024/06/06 06:32

html中 

<div class="box"><div>

它的css样式为:

.box {      width: 200px;      height: 200px;      background: rgb(23,321,44);    }


js中我们要得到box这个元素的css属性,通常会用类似下面这样的函数:

function getStyle(obj, str) {    if (obj.currentStyle) {      return obj.currentStyle[str]    } else {      return window.getComputedStyle(obj,null)[str]    }  }

然后传入这个元素 var box = document.getElemenById('box');

 getStyle(box,'width')  //200px

getStyle(box,'background')   //在火狐浏览器下无输出


      比较疑惑,后来查了相关资料,才知道在火狐浏览器下该函数不能返回复合属性的值,只能返回单属性,例如:

 getStyle(box, 'backgroundColor')  //rgb(23, 321, 44)

在这里因为background是个复合属性,它包括了backgroundColor,backgroundSize等属性,故不能返回。