当我按下 3 个不同的按钮（红绿蓝）时，我想动态创建 3 个 div 标签。当我按下红色时，我希望“红色”div 的高度是我的屏幕大小，以便整个页面看起来是红色的并且当我按绿色时，我希望“红色”div 的高度成为我屏幕的 50%，而其他 50% 的屏幕应该被其他 div（即绿色）占据。
最后，当我按下蓝色按钮时，我希望所有 div 都以相同的高度出现在屏幕上......
我可以创建 div，但是在按下所有三个按钮后按下红色按钮时，我无法删除以前创建的 div...
这是代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Ass 2</title>
<script type="text/javascript">
function fblue() {
// document.bgColor = 'lightblue';
selc=document.getElementById("first");
divBlue=document.getElementById("one");
myPara.removeChild(divBlue);
selc=document.getElementById("first");
divBlue=document.createElement("div");
divBlue.id = "one";
divBlue.style.backgroundColor = "lightblue";
divBlue.style.height = "610px"
divBlue.innerHTML = "dv tag created successfully";
selc.appendChild(divBlue);
}
function fgreen() {
selc=document.getElementById("first");
divBlue=document.getElementById("one");
divBlue.id = "one";
divBlue.style.backgroundColor = "lightblue";
divBlue.style.height = "305px"
divBlue.innerHTML = "dv tag created successfully";
selc.appendChild(divBlue);
divGreen=document.createElement("div");
divGreen.id = "one";
divGreen.style.backgroundColor = "lightgreen";
divGreen.style.height = "305px"
divGreen.innerHTML = "dv tag created successfully";
selc.appendChild(divGreen);
//document.bgColor = '';
}
function fred() {
document.getElementById("one").style.backgroundColor = 'lightblue';
document.getElementById("one").style.width = '1104px';
document.getElementById("one").style.height = '185px';
document.getElementById("two").style.backgroundColor = 'red';
document.getElementById("two").style.width = '1104px';
document.getElementById("two").style.height = '185px';
document.getElementById("three").style.backgroundColor = 'lightgreen';
document.getElementById("three").style.width = '1104px';
document.getElementById("three").style.height = '185px';
document.bgColor = '';
}
</script>
</head>
<body style="margin: 0px;">
<div style="height: 0px;" id="first"></div>
<div id="four" style="margin-left: 415px; margin-top: 500px">
<form>
<input type="button" name="blu" value="Blue" onclick="javascript:fblue();">
<input type="button" name="gre" value="Green/Red" onclick="javascript:fgreen();">
<input type="button" name="re" value="Red/Green/Blue" onclick="javascript:fred();">
</form>
</div>
</body>
</html>