Méthode JS pour réaliser un clic sur le bouton pour contrôler la largeur de la Div, l'augmentation de la hauteur et l'ajustement de la couleur d'arrière-plan

Méthode JS pour réaliser un clic sur le bouton pour contrôler la largeur de la Div, l'augmentation de la hauteur et l'ajustement de la couleur d'arrière-plan_javascript

WBOY

Libérer： 2016-05-16 15:46:50

original

2138 Les gens l'ont consulté

L'exemple de cet article décrit comment utiliser JS pour contrôler la largeur, la hauteur et la couleur d'arrière-plan d'un Div en cliquant sur un bouton. Partagez-le avec tout le monde pour votre référence. Les détails sont les suivants :

JavaScript est utilisé ici pour modifier la hauteur, la largeur et la couleur d'arrière-plan du DiV après avoir cliqué sur le bouton. Cliquez sur le bouton correspondant, et le Div ajuste la hauteur, la largeur, la couleur d'arrière-plan, etc. En termes de mise en œuvre, JS est principalement utilisé pour contrôler le changement des fichiers de style CSS après avoir cliqué sur le bouton. Tout cela est sous le contrôle dynamique de JS, comme la mise en œuvre du changement de style de page Web sans actualisation, qui peut être étendue en fonction de. ce.

L'effet de l'opération est comme indiqué ci-dessous :

Le code spécifique est le suivant :

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

Copier après la connexion

J'espère que cet article sera utile à la conception de la programmation JavaScript de chacun.