getComputedStyle与currentStyle的区别

Posted 2020-10-01 今天想转行了吗

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了getComputedStyle与currentStyle的区别相关的知识，希望对你有一定的参考价值。

先看个例子

<!DOCTYPE html>
<html lang="en">
<script src="miaov.js"></script>
<head>
    <meta charset="UTF-8">
    <title>return返回值</title>
    <style>
        #div1{
            width:50px;
            height:50px;
            background-color: greenyellow;
        }
    </style>
</head>
<body>
<button id="btn">按钮</button>
<div id="div1" style="width:400px;"></div>
</body>
<script>
//    alert(typeof fn1());
//
//    function fn1(){
//        return ‘miaov‘;
//    }
//
//    alert(typeof fn2(10)(20));
//    function fn2(a){
//        return function(b){
//            alert(a+b);
//        }
//    }
  /*  $(function(){});

    function $(v){
        if(typeof v===‘function‘){
            window.onload = v;
        }else if(typeof v==‘string‘){
            return document.getElementById(v);
        }else if(typeof v===‘object‘){
            return v;
        }
    }*/
  $(function(){
      $("btn").onclick = function(){
          $(‘div1‘).style.width=‘300px‘;

        // alert($(‘div1‘).style.width);  是行内样式才可以获取到宽度

         // alert(getComputedStyle($(‘div1‘)).width); //300px
          //获取到的是计算机计算后的样式，在低于IE9不起作用
          //alert($(‘div1‘).currentStyle.width); 在IE低版本6，7，8下才能用，其他浏览器反而失效

          //兼容性的写法
          if($(‘div1‘).currentStyle){
                alert($(‘div1‘).currentStyle.width);
          }else{
              alert(getComputedStyle($(‘div1‘)).width);
          }
      }

  });
  //调用getStyle
alert(getStyle($(‘div1‘),‘height‘));
  function getStyle(obj,attr){
      if(obj.currentStyle){
          return obj.currentStyle[attr];
      }else{
          return getComputedStyle(obj)[attr];
      }

//三目运算
        // return obj.currentStyle ? obj.currentStyle[attr]: getComputedStyle(obj)[attr];

  }
//不要获取未设置的样式
   // 不要获取复合样式(如：background)
</script>

以上是关于getComputedStyle与currentStyle的区别的主要内容，如果未能解决你的问题，请参考以下文章

getComputedStyle与currentStyle获取样式(style/class)

js中getComputedStyle()与currentStyle()style()方法的区别

getComputedStyle与currentStyle的区别

getComputedStyle与currentStyle获取样式(style/class)

getcomputedstyle和style的区别