js改变div的宽度和高度 

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>js改变div的宽度和高度</title>
 6     <style>
 7         #mydiv{
 8             width: 200px;
 9             height: 200px;
10             background-color: pink;
11         }
12     </style>
13     <script>
14         window.onload = function () {
15             //拿到div
16             var div = document.getElementById("mydiv");
17             //拿到两个按钮
18             var btns = document.getElementsByTagName("input");
19 
20             btns[0].onclick = function () {
21                 //拿到div显示出来的宽度
22                 //alert(getStyle(div,"width"));
23                 //alert(parseInt(getStyle(div,"width")) + 20);
24                 //改变宽度
25                 div.style.width = parseInt(getStyle(div,"width")) + 20 + "px";
26             }
27             btns[1].onclick = function () {
28                 //改变高度
29                 div.style.height = parseInt(getStyle(div, "height")) + 20 + "px";
30             }
31         }
32 
33         //获取style样式的css属性,考虑兼容;ie,火狐/谷歌;
34         function getStyle(parm1,parm2) {
35             return parm1.currentStyle ? parm1.currentStyle[parm2] : getComputedStyle(parm1)[parm2];  //parm1,要改变的元素代替名;parm2,要改变的属性名
36         }
37     </script>
38 </head>
39 <body>
40     <div id="mydiv"></div>
41     <input type="button" value="改变宽度"/>
42     <input type="button" value="改变高度"/>
43 </body>
44 </html>

 

posted @ 2017-08-18 16:00  宋发元  阅读(19810)  评论(0)    收藏  举报