<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> div{ width:300px; height: 300px; background-color: #333; } .box{ width:500px; height: 500px; background-color: #ccc; } </style> </head> <body> <div id="box"></div> <script type="text/javascript"> // var oDiv=document.getElementById('box'); // oDiv.onclick=function(){ // this.style.width='400px'; // this.style.height='400px'; // this.style.backgroundColor='#ccc'; // } //第一种方法 // var oDiv=document.getElementById('box'); // oDiv.onclick=function(){ // this.style.cssText='500px; height:500px; background-color:#ccc;'; // } //第二种方法 // var oBox=document.getElementById('box'); // oBox.onclick=function(){ // with(oBox.style){ // width=500+'px'; // height=100+'px'; // backgroundColor='#ccc'; // } // } //第三种方法 var oDiv=document.getElementById('box'); oDiv.onclick=function(){ oDiv.className='box'; } //第四种方法 </script> </body> </html>