suchen

Heim >Web-Frontend >js-Tutorial >JS-Methode zum Realisieren des Klickens auf eine Schaltfläche zum Steuern der Div-Breite, Erhöhung und Anpassung der Hintergrundfarbe_Javascript-Fähigkeiten

JS-Methode zum Realisieren des Klickens auf eine Schaltfläche zum Steuern der Div-Breite, Erhöhung und Anpassung der Hintergrundfarbe_Javascript-Fähigkeiten

WBOY
WBOYOriginal
2016-05-16 15:46:502125Durchsuche

Das Beispiel in diesem Artikel beschreibt, wie Sie mit JS die Breite, Höhe und Hintergrundfarbe eines Div durch Klicken auf eine Schaltfläche steuern. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:

JavaScript wird hier verwendet, um die Höhe, Breite und Hintergrundfarbe des DiV zu ändern, nachdem Sie auf die Schaltfläche geklickt haben. Klicken Sie auf die entsprechende Schaltfläche, und das Div passt die Höhe, Breite, Hintergrundfarbe usw. an. In Bezug auf die Implementierung wird JS hauptsächlich zur Steuerung der Änderung von CSS-Stildateien nach dem Klicken auf die Schaltfläche verwendet. All dies unterliegt der dynamischen Steuerung von JS, z. B. der Implementierung des Wechsels von Webseitenstilen ohne Aktualisierung, die basierend auf erweitert werden kann Das.

Der Betriebseffekt ist wie folgt:

Der spezifische Code lautet wie folgt: 

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

Ich hoffe, dass dieser Artikel für das JavaScript-Programmierdesign aller hilfreich sein wird.

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Drag-and-Drop implementiert Bildbrowser-Vorschau_Javascript-FähigkeitenNächster Artikel：Drag-and-Drop implementiert Bildbrowser-Vorschau_Javascript-Fähigkeiten

In Verbindung stehende Artikel

Mehr sehen