本文实例讲述了JS实现点击按钮控制Div变宽、增高及调整背景色的方法。分享给大家供大家参考。具体如下：
这里使用JavaScript实现点击按钮后改变DiV的高度、宽度和背景色等，点击对应按钮，Div调整高度、调整宽度、调整背景色等。实现方面主要是使用JS来控制点击按钮后改变CSS样式文件，这一切都是在JS的动态控制下，比如无刷新切换网页风格的实现，可以以此为基础来扩展。
运行效果如下图所示：
具体代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>点击按钮改变CSS样式</title> <style type="text/css"> * { padding:0px; margin:0px; } .box { width:300px; height:300px; border:1px solid #CBC4F7; font-size:13px; margin:100px auto; } .divWidth { width:400px; } .divHeight { height:400px; } .divBgColor { background-color:#DCF3B1; } p { padding:15px 5px; } ul li { list-style:none; width:140px; height:32px; text-align:center; line-height:32px; background-color:#C4EA84; border:1px solid #9BEA75; margin:0px auto; margin-bottom:10px; cursor:pointer; background-image:-webkit-linear-gradient(top, #C4EA84, #53AC28); background-image:-moz-linear-gradient(top, #C4EA84, #53AC28); background-image:-o-linear-gradient(top, #C4EA84, #53AC28); -webkit-border-radius:4px; -moz-border-radius:4px; -o-border-radius:4px; } </style> <script type="text/javascript"> window.onload=function(){ var btn1 = document.getElementById("btn1"); var btn2 = document.getElementById("btn2"); var btn3 = document.getElementById("btn3"); funClick = function(btnID,changeClass){ btnID.onclick = function() { var boxClass = btnID.parentNode.parentNode.className; var ifClass = boxClass.indexOf(changeClass); if(ifClass < 0){ boxClass = boxClass + " " + changeClass; }else { boxClass = boxClass.replace(changeClass,""); } btnID.parentNode.parentNode.className = boxClass; } } funClick(btn1,"divWidth"); funClick(btn2,"divHeight"); funClick(btn3,"divBgColor"); } </script> </head> <body> <div> <p>这里是少许文本</p> <ul> <li id="btn1">点我调整宽度</li> <li id="btn2">点我调整高度</li> <li id="btn3">点我调整背景颜色</li> </ul> </div> </body> </html>
希望本文所述对大家的javascript程序设计有所帮助。