cari

Rumah >hujung hadapan web >tutorial js >Javascript mengawal perubahan dinamik atribut div contoh kemahiran analisis_javascript

Javascript mengawal perubahan dinamik atribut div contoh kemahiran analisis_javascript

WBOY
WBOYasal
2016-05-16 15:37:121114semak imbas

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>

Saya harap artikel ini akan membantu pengaturcaraan JavaScript semua orang.

Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：JS melaksanakan kesan seret tetikus bagi kemahiran layer_javascript lipatan boleh dikembangkanArtikel seterusnya：JS melaksanakan kesan seret tetikus bagi kemahiran layer_javascript lipatan boleh dikembangkan

Artikel berkaitan

Lihat lagi