Html code
<! 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>
<Meta http-equiv = "Content-Type" content = "text/html; charset = gb2312"/>
<Title> Control div attributes </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. removeAttribute ("style "));
ChangeStyle (oDiv, oAtt [this. index], oVal [this. index])
}
}
};
</Script>
</Head>
<Body>
<Div id = "outer">
<Input type = "button" value = "widening"/>
<Input type = "button" value = "higher"/>
<Input type = "button" value = "color change"/>
<Input type = "button" value = "hide"/>
<Input type = "button" value = "reset"/>
<Div id = "div1"> </div>
</Div>
</Body>
</Html>
Author "Rebecca"