click绑定两个方法
<style type="text/css"> #layout{ width: 320px; margin:auto auto ; } .lay{ width: 100px; height: 100px; background-color: orangered; display: inline-block; } .lay2{ width: 200px; height: 150px; background-color: greenyellow; display: inline-block; } </style> <body> <div id="layout"> <div class="lay" ></div> <div class="lay"></div> <div class="lay"></div> <div class="lay"></div> <div class="lay"></div> <div class="lay"></div> <div class="lay"></div> <div class="lay"></div> <div class="lay"></div> </div> <input type="button" value="改变九宫格样式" id="but3"/> <script type="text/javascript"> var but3 = document.getElementById('but3'); var str = document.getElementById('layout').childNodes; //获得“class='lay'的9个div” but3.onclick = function(){ //给button绑定点击事件，通过判断className的值进行切换样式 if(str[1].className == 'lay'){ for( var i=0;i< str.length;i++){ str[i].className = 'lay2'; }; }else{ for( var i=0;i< str.length;i++){ str[i].className = 'lay'; } } } </script> </body>