<!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=utf-8"
/>
<title>控制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>