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>
