快捷導(dǎo)航

JS實(shí)現(xiàn)點(diǎn)擊按鈕控制Div變寬、增高及調(diào)整背景色的方法

更新時間：2015年08月05日 16:53:39 作者：皮蛋

這篇文章主要介紹了JS實(shí)現(xiàn)點(diǎn)擊按鈕控制Div變寬、增高及調(diào)整背景色的方法,涉及javascript動態(tài)操作頁面元素屬性的相關(guān)技巧,適用于動態(tài)更換頁面皮膚的功能,需要的朋友可以參考下

本文實(shí)例講述了JS實(shí)現(xiàn)點(diǎn)擊按鈕控制Div變寬、增高及調(diào)整背景色的方法。分享給大家供大家參考。具體如下：

這里使用JavaScript實(shí)現(xiàn)點(diǎn)擊按鈕后改變DiV的高度、寬度和背景色等，點(diǎn)擊對應(yīng)按鈕，Div調(diào)整高度、調(diào)整寬度、調(diào)整背景色等。實(shí)現(xiàn)方面主要是使用JS來控制點(diǎn)擊按鈕后改變CSS樣式文件，這一切都是在JS的動態(tài)控制下，比如無刷新切換網(wǎng)頁風(fēng)格的實(shí)現(xiàn)，可以以此為基礎(chǔ)來擴(kuò)展。

運(yùn)行效果如下圖所示：

具體代碼如下：

<!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>點(diǎn)擊按鈕改變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">點(diǎn)我調(diào)整寬度</li>
   <li id="btn2">點(diǎn)我調(diào)整高度</li>
   <li id="btn3">點(diǎn)我調(diào)整背景顏色</li>
  </ul>
 </div>
</body>
</html>

希望本文所述對大家的javascript程序設(shè)計(jì)有所幫助。

您可能感興趣的文章: