js 设置和获取 div 样式

<!DOCTYPE html> <html lang="en"> <head>   <meta charset="UTF-8">   <meta http-equiv="X-UA-Compatible" content="IE=edge">   <meta name="viewport" content="width=device-width, initial-scale=1.0">   <title>Document</title>   <style>      #box1{        width: 100px;        height: 100px;        background-color: red;      }   </style>   <script>
    window.onload = function(){         /**          *  点击按钮以后 修改box1 的大小         */        var box1 = document.getElementById("box1");         var btn01 = document.getElementById("btn01");
       btn01.onclick = function(){
        // 修改 box1 的宽度          /**          *  通过 js 修改元素的样式          *  语法: 元素.style.样式名 = 样式值         */         box1.style.width = '300px';         box1.style.height = '300px';         box1.style.backgroundColor = 'yellow';        }

       // 读取 元素的样式        var btn02 = document.getElementById("btn02");        btn02.onclick = function(){           // 读取 box1 的样式            /**             *  语法: 元素.style.样式名            *  通过 style 属性设置 和读取的 都是 内连样式            *  无法读取样式表中的样式            */         //  alert(box1.style.width)   
         /**            *  获取元素的当前显示的样式 只能读 不能修改            *  语法: 元素.currentStyle.样式名 --> 只支持ie             *  可以读当前元素显示的样式             * window.getComputedStyle(元素 null)[样式名] -> 其它浏览器 使用这个 ->不支持 ie8 以下的浏览器            * window.getComputedStyle(元素 null).样式名            *   如果获取的样式 没有设置 则会获取到真实的值 而不是默认值           */             console.log(getStyle(box1,'width'));                     }                 /**          *  定义一个函数 用来获取指定元素的当前的样式          *  参数           *    obj  要获取样式的元素          *    name 要获取的样式名         */        function getStyle(obj,name){                    if(window.getComputedStyle){             // 正常浏览器的方式             return  getComputedStyle(obj,null)[name];           }else{             // ie8 的方式             return obj.currentStyle[name];           }                    }
      }
  </script>   </head> <body>
  <button id="btn01">点我一下</button>   <button id="btn02">点我一下2</button>   <br />  <br />       <div id="box1"> </div>      </body> </html>
上一篇:【转】Javascript错误处理——try…catch


下一篇:element.style和window.getComputedStyle的区别