Home>

Here use js to control the div attribute change,The geometry of the other div changes,For example, make it wider, higher, change color, hide div, reset all properties to default values, etc.Although in this example,Changes to these property values ​​are simple to implement,But in the design of javascript web front end,This property or method is often used,Therefore, it is worthy of everyone's attention.

The screenshot of the running effect is as follows:

The online demo address is as follows:

The specific code is as follows:

<! 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 control div attribute change</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>
<input type="button" value="becoming wider" />
<input type="button" value="becoming high" />
<input type="button" value="change color" />
<input type="button" value="hidden" />
<input type="button" value="reset" />
<div></div>
</div>
</body>
</html>
  • Previous Difference between iOS's UIColor class and its related classes and methods for determining equality
  • Next JS + CSS blue table tab effect