Heim > Artikel > Web-Frontend > Javascript-Steuerung, dynamische Änderung von Div-Attributen, Beispiel für Analysis_Javascript-Kenntnisse

Javascript-Steuerung, dynamische Änderung von Div-Attributen, Beispiel für Analysis_Javascript-Kenntnisse

WBOYOriginal: 2016-05-16 15:37:121060Durchsuche

In diesem Artikel wird die Methode analysiert, mit der Javascript dynamische Änderungen von div-Attributen steuert. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:

Hier wird JS verwendet, um Div-Attributänderungen zu steuern und die geometrische Größe des Div zu ändern, z. B. breiter oder höher zu werden, die Farbe zu ändern, das Div auszublenden, alle Attribute auf Standardwerte zurückzusetzen usw. Obwohl in diesem Beispiel Änderungen an den Werten dieser Eigenschaften einfach zu implementieren sind, wird diese Eigenschaft oder Methode im JavaScript-Web-Frontend-Design häufig verwendet, sodass sie dennoch die Aufmerksamkeit aller verdient.

Der Screenshot des Laufeffekts sieht wie folgt aus:

Die Online-Demo-Adresse lautet wie folgt:

http://demo.jb51.net/js/2015/js-cha-div-opt-demo/

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>
<title>Javascript控制div属性变化</title>
<style> 
#outer{width:500px;margin:0 auto;padding:0;text-align:center;}
#div1{width:100px;height:100px;background:black;margin:10px auto;display:block;}
</style>
<script> 
var changeStyle = function (elem, attr, value)
{
 elem.style[attr] = value
};
window.onload = function ()
{
 var oBtn = document.getElementsByTagName("input");
 var oDiv = document.getElementById("div1");
 var oAtt = ["width","height","background","display","display"];
 var oVal = ["200px","200px","red","none","block"];
 for (var i = 0; i < oBtn.length; i++)
 {
  oBtn[i].index = i;
  oBtn[i].onclick = function ()
  {
   this.index == oBtn.length - 1 && (oDiv.style.cssText = "");
   changeStyle(oDiv, oAtt[this.index], oVal[this.index])
  }
 }
};
</script>
</head>
<body>
<div id="outer">
<input type="button" value="变宽" />
<input type="button" value="变高" />
<input type="button" value="改变颜色" />
<input type="button" value="隐藏" />
<input type="button" value="重置" />
<div id="div1"></div>
</div>
</body>
</html>

Ich hoffe, dass dieser Artikel für die JavaScript-Programmierung 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：JS implementiert den Mauszieheffekt der erweiterbaren Faltebene_Javascript-FähigkeitenNächster Artikel：JS implementiert den Mauszieheffekt der erweiterbaren Faltebene_Javascript-Fähigkeiten

In Verbindung stehende Artikel

Mehr sehen