zoukankan      html  css  js  c++  java
  • 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="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>
  • 相关阅读:
    kali 所有版本
    kali有关问题及kali2018.2安装
    python2
    burpsuite 破解教程
    python生成个性二维码
    万能密码
    python 1
    python
    python 第三方库安装
    Androidstdio 简单界面设计 登陆系统
  • 原文地址:https://www.cnblogs.com/qianxunpu/p/7290456.html
Copyright © 2011-2022 走看看