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>
189
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
