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.
