getComputedStyle与currentStyle获取样式

时间:2022-08-18 15:50:21

转载自:https://segmentfault.com/a/1190000007477785

 

CSS的样式分为三类:

内嵌样式:是写在标签里面的,内嵌样式只对所在的标签有效
内部样式:是写在HTML里面的,内部样式只对所在的网页有效
外部样式表:如果很多网页需要用到同样的样式,将样式写在一个以.css为后缀的CSS文件里,然后在每个需要用到这些样式的网页里引用这个CSS文件

getComputedStyle是一个可以获取当前元素所有最终使用的CSS属性值,返回的是一个CSS样式声明对象,只读
currentStyle是IE浏览器的一个属性

基础知识

众所周知,用document.getElementById('element').style.xxx可以获取elementxxx样式信息,可是它获取的只能是DOM元素内嵌样式style属性里的样式规则,对于使用外部样式表内部样式设置的元素,就获取不到样式信息了。 
DOM标准里有个全局方法getComputedStyle,可以获取到当前对象样式信息,如:getComputedStyle(obj,null).paddingLeft,就能获取到对象的左内边距。但是IE不支持此方法,IE中获取样式的方法是currentStyle,不同于全局方法getComputedStyle,它是作为DOM元素属性存在的,如:obj.currentStyle.paddingLeft,在IE中就获取到对象的左内边距了,兼容性的写法如下:

return obj.currentStyle?obj.currentStyle.paddingLeft:getComputedStyle(obj,null).paddingLeft;
在ie浏览器中,
obj.currentStyle是一个对象,而在非ie浏览器中则显示的是undefined,所以可以用以上方法来处理兼容性的问题!!
(判断obj.currentStyle为真时,执行ie的currentStyle方法;判断obj.currentStyle为假时,执行getComputedStyle(obj,null)方法

getComputedStyle第二个参数表示的是:after:before之类的伪类,如果不用伪类的话设置为null即可。注意的是:Gecko 2.0 (Firefox 4 / Thunderbird 3.3 / SeaMonkey 2.1) 之前,第二个参数“伪类”是必需的(如果不是伪类,设置为null),不过现在嘛,不是必需参数了
这样,就能在IE及FF中返回对象的当前样式信息了。
特别注意一点:如果要获取当前对象的颜色信息,IE返回的是16进制值,如:#ffffff,而其他浏览器返回的是rgb值,如:rgb(255,255,255)


下面是一个简单的小示例:

 一般简单使用:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <style>
    #div1{
      width: 100px;
      height: 100px;
      background: red;
    }
  </style>
  <script>
    window.onload=function(){
    var oDiv=document.getElementById('div1');
    var btn=document.getElementById('btn');

    btn.onclick=function(){
       //currentStyle和getComputedStyle 解释为:获取计算后的样式(当前样式/最终样式)

      if(oDiv.currentStyle){
         //ie 在ie浏览器中,oDiv.currentStyle的值为对象,所以是“真”
        alert(oDiv.currentStyle.width);
      }
      else {
         //ff chrome... 在非ie浏览器中,oDiv.currentStyle的值为‘undefined’,所以为假
        alert(getComputedStyle(oDiv).width);
      }
    }
  }
  </script>
</head>
<body>
  <div id="div1"></div>
  <input id="btn" type="button" value="yangshi">
</body>
</html>
 

 ②封装代码使用:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <style>
    #div1{
      width: 100px;
      height: 100px;
      background: red;
    }
  </style>
  <script>
     //封装到单独的get函数中
    function get(obj,arr){
      if(obj.currentStyle){
        return obj.currentStyle[arr];
      }
      else{
        return getComputedStyle(obj)[arr];
      }
    }

    window.onload=function(){
      var oDiv=document.getElementById('div1');
      var btn=document.getElementById('btn');

      btn.onclick=function(){
         //调用get函数
        alert(get(oDiv,'width'));
      }
    }
  </script>
</head>
<body>
  <div id="div1"></div>
  <input id="btn" type="button" value="yangshi">
</body>
</html>
 
③结合实例使用:
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <style>
    #div1{
      width: 100px;
      height: 100px;
      background-color: red;
    }
  </style>
  <script>
    function get(obj,arr){   //传入2个参数,用于获取需要修改的元素(例如:div),和获取需要修改的样式
       //运用上个代码②的封装,get函数,用于获取div的css样式
      if(obj.currentStyle){
        return obj.currentStyle[arr];
      }
      else{
        return getComputedStyle(obj)[arr];
      }
    }
    function css(obj,arr,value){   //传入3个参数,用于获取需要修改的元素(例如:div),获取需要修改的样式,和需要修改的样式的值
       //自定义css函数,用于处理div的css样式变化
 
      if(arguments.length==2){
         //当css函数的参数为2个时,调用get函数,输出div中的css样式
        alert(get(obj,arr));
      }
      else if(arguments.length==3){
         //当css函数的参数为3个时,执行下面代码,修改div中的css样式
        obj.style[arr]=value;
      }
    }

    window.onload=function(){
      var oDiv=document.getElementById('div1');
      var btn=document.getElementById('btn');

      btn.onclick=function(){
         //调用css函数方法
        css(oDiv,'backgroundColor')
        css(oDiv,'backgroundColor','green')
      }
    }
  </script>
</head>
<body>
  <div id="div1"></div>
  <input id="btn" type="button" value="yangshi">
</body>
</html>

兼容性

getComputedStyle:FireFox、Opera、Safari、Chrome均支持
currentStyle:仅IE支持