Javascript mengawal perubahan dinamik atribut div contoh kemahiran analisis

Javascript mengawal perubahan dinamik atribut div contoh kemahiran analisis_javascript

WBOY

Lepaskan： 2016-05-16 15:37:12

asal

1101 orang telah melayarinya

Artikel ini menganalisis kaedah Javascript mengawal perubahan dinamik atribut div. Kongsikan dengan semua orang untuk rujukan anda. Butirannya adalah seperti berikut:

Di sini, JS digunakan untuk mengawal perubahan atribut div, dan saiz geometri Div berubah, seperti menjadi lebih lebar, lebih tinggi, menukar warna, menyembunyikan Div, menetapkan semula semua atribut kepada nilai lalai, dsb. Walaupun dalam contoh ini, perubahan kepada nilai sifat ini mudah dilaksanakan, dalam reka bentuk bahagian hadapan web JavaScript, sifat atau kaedah ini sering digunakan, jadi ia masih layak untuk perhatian semua orang.

Tangkapan skrin kesan berjalan adalah seperti berikut:

Alamat demo dalam talian adalah seperti berikut:

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

Kod khusus adalah seperti berikut:

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

Salin selepas log masuk

Saya harap artikel ini akan membantu pengaturcaraan JavaScript semua orang.