1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 6 <title>练习</title> 7 <style type="text/css"> 8 #box{width: 100px;height: 100px;border:1px solid #ccc;} 9 </style> 10 <script type="text/javascript"> 11 function toWidth(){ 12 document.getElementById('box').style.width='200px'; 13 } 14 function toHight(){ 15 document.getElementById('box').style.height='200px'; 16 } 17 function toColor(){ 18 document.getElementById('box').style.background='green'; 19 } 20 function toHide(){ 21 document.getElementById('box').style.display='none'; 22 } 23 function toShow(){ 24 document.getElementById('box').style.display='block'; 25 } 26 function move(){ 27 document.getElementById('box').style.marginLeft='300px'; 28 } 29 </script> 30 </head> 31 <body> 32 <input type="button" value="变宽" onclick="toWidth();"> 33 <input type="button" value="变高" onclick="toHight();"> 34 <input type="button" value="变色" onclick="toColor();"> 35 <input type="button" value="隐藏" onclick="toHide();"> 36 <input type="button" value="显示" onclick="toShow();"> 37 <input type="button" value="往右移动300px" onclick="move()"> 38 <div id="box"></div> 39 </body> 40 </html>
如:css写法为margin-left:300px;但js写法为marginLeft