Contrôle Javascript changement dynamique des attributs div exemple de compétences d'analyse

Contrôle Javascript changement dynamique des attributs div exemple de compétences d'analyse_javascript

WBOY

Libérer： 2016-05-16 15:37:12

original

1100 Les gens l'ont consulté

Cet article analyse la méthode Javascript contrôlant les changements dynamiques des attributs div. Partagez-le avec tout le monde pour votre référence. Les détails sont les suivants :

Ici, JS est utilisé pour contrôler les changements d'attributs div et la taille géométrique des changements de Div, comme devenir plus large, plus haut, changer de couleur, masquer le Div, réinitialiser tous les attributs aux valeurs par défaut, etc. Bien que dans cet exemple, les modifications des valeurs de ces propriétés soient faciles à mettre en œuvre, dans la conception frontale Web JavaScript, cette propriété ou méthode est souvent utilisée, elle mérite donc toujours l'attention de tous.

La capture d'écran de l'effet en cours d'exécution est la suivante :

L'adresse de la démo en ligne est la suivante :

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

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

Copier après la connexion

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