本文實例講述了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 class="box"><p>這里是少許文本</p> <ul> <li id="btn1">點我調整寬度</li> <li id="btn2">點我調整高度</li> <li id="btn3">點我調整背景顏色</li> </ul> </div></body></html>希望本文所述對大家的javascript程序設計有所幫助。
新聞熱點
疑難解答
