cari

Rumah >hujung hadapan web >tutorial js >Kaedah JS untuk merealisasikan butang klik untuk mengawal lebar Div, peningkatan dan kemahiran pelarasan warna latar belakang_javascript

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

WBOY
WBOYasal
2016-05-16 15:46:502120semak imbas

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>

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

Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：Drag-and-drop melaksanakan kemahiran pratonton_javascript pelayar imejArtikel seterusnya：Drag-and-drop melaksanakan kemahiran pratonton_javascript pelayar imej

Artikel berkaitan

Lihat lagi