码迷,mamicode.com
首页 > 其他好文 > 详细

getComputedStyle与currentStyle的区别

时间:2017-08-05 16:03:23      阅读:112      评论:0      收藏:0      [点我收藏+]

标签:span   height   title   其他   例子   obj   char   width   logs   

先看个例子

<!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的区别

标签:span   height   title   其他   例子   obj   char   width   logs   

原文地址:http://www.cnblogs.com/qianxunpu/p/7290456.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!