点击按钮 方块变换大小 颜色 隐藏 显示 恢复
第一种
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>改变颜色框</title>
<script>
function mychange(num){
if(num == "1")
{
document.getElementById('div').style.width='400px';
}
if(num == "2")
{
document.getElementById('div').style.height='400px';
}
if(num == "3")
{
document.getElementById('div').style.background = 'blue';
}
if(num == "4")
{
document.getElementById('div').style.height='200px';document.getElementById('div').style.width='200px';document.getElementById('div').style.backgroundColor = 'red';
}
if(num == "5")
{
document.getElementById('div').style.display='none';
}
if(num == "6")
{
document.getElementById ('div').style.display='block';
}
}
</script>
</head>
<body>
<div id="div" style="height:200px; width:200px; background:red"></div>
<p> </p>
<p>
<input type="button" value="变宽" onclick="mychange(1)" >
<input type="button" value="变高" onclick="mychange(2)" >
<input type="button" value="变色" onclick="mychange(3)" >
<input type="button" value="恢复" onclick="mychange(4)" >
<input type="button" value="隐藏" onclick="mychange(5)" >
<input type="button" value="显示" onclick="mychange(6)" >
</p>
</body>
</html>
第二种
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>改变颜色框</title>
<script>
function mychange(p1,p2){
document.getElementById("div").style[p1]=p2;
if(p1 == "huifu")
{
document.getElementById('div').style.height='200px';
document.getElementById('div').style.width='200px';
document.getElementById('div').style.backgroundColor = 'red';
}
}
</script>
</head>
<body>
<div id="div" style="height:200px; width:200px; background:red"></div>
<p> </p>
<p>
<input type="button" value="变宽" onclick="mychange('width','400px')" >
<input type="button" value="变高" onclick="mychange('height','400px')" >
<input type="button" value="变色" onclick="mychange('background','blue')" >
<input type="button" value="恢复" onclick="mychange('huifu','')" >
<input type="button" value="隐藏" onclick="mychange('display','none')" >
<input type="button" value="显示" onclick="mychange('display','block')" >
</p>
</body>
</html>
