Kaedah JS untuk merealisasikan butang klik untuk mengawal lebar Div, peningkatan dan kemahiran pelarasan warna latar belakang

Kaedah JS untuk merealisasikan butang klik untuk mengawal lebar Div, peningkatan dan kemahiran pelarasan warna latar belakang_javascript

WBOY

Lepaskan： 2016-05-16 15:46:50

asal

2107 orang telah melayarinya

Contoh dalam artikel ini menerangkan cara menggunakan JS untuk mengawal lebar, ketinggian dan warna latar belakang Div dengan mengklik butang. Kongsikan dengan semua orang untuk rujukan anda. Butirannya adalah seperti berikut:

JavaScript digunakan di sini untuk menukar ketinggian, lebar dan warna latar belakang DiV selepas mengklik butang Klik butang yang sepadan, dan Div melaraskan ketinggian, lebar, warna latar belakang, dsb. Dari segi pelaksanaan, JS digunakan terutamanya untuk mengawal perubahan fail gaya CSS selepas mengklik butang Semua ini adalah di bawah kawalan dinamik JS, seperti pelaksanaan menukar gaya halaman web tanpa menyegarkan, yang boleh dikembangkan berdasarkan. ini.

Kesan operasi adalah seperti yang ditunjukkan di bawah:

Kod khusus adalah seperti berikut:

<!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>

Salin selepas log masuk

Saya harap artikel ini akan membantu reka bentuk pengaturcaraan JavaScript semua orang.