recherche

Maison  >  Article  >  interface Web  >  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

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
WBOYoriginal
2016-05-16 15:46:502105parcourir

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>

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

Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Le glisser-déposer implémente les compétences preview_javascript du navigateur d'imagesArticle suivant：Le glisser-déposer implémente les compétences preview_javascript du navigateur d'images

Articles Liés

Voir plus