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

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等属性,故不能返回。



猜你喜欢

转载自blog.csdn.net/lihchweb/article/details/72886147