通过按钮改变背景页面颜色和隐藏或显示div
本帖是对JSDOM编程的练习：
- 设置四个不同颜色按钮，当鼠标悬浮到按钮之上，页面显示相应背景颜色，当鼠标移开并不选择按钮，页面背景颜色变回白色。
- 设置一个按钮，控制页面某个div的显示，一开始div显示，按钮显示“隐藏”，此时点击按钮，div隐藏并把按钮变成“显示”，再次单击按钮，div出现并把按钮变成“隐藏”。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
button{
border: 0px solid red;
width: 50px;
height: 50px;
cursor: pointer;
}
#divv{
position: absolute;
left: 500px;
top: 200px;
width: 200px;
height: 200px;
border: 1px solid red;
background-color: orangered;
}
</style>
</head>
<body>
<button style="background-color: red;" onmouseover="changeColor('red')" onmouseout="returnColor()"></button>
<button style="background-color: deepskyblue;" onmouseover="changeColor('deepskyblue')" onmouseout="returnColor()"></button>
<button style="background-color: lawngreen;" onmouseover="changeColor('lawngreen')" onmouseout="returnColor()"></button>
<button style="background-color: hotpink;" onmouseover="changeColor('hotpink')" onmouseout="returnColor()"></button>
<button onclick="dianji(this)" ><font>隐藏</font></button>
<div id=divv>
</div>
<!--backgroundColor在bgColor上层-->
<script>
function changeColor(color){
// var objectC = document.body;
document.body.style.backgroundColor = color;
// document.bgColor = document.;
}
function returnColor(){
// document.bgColor = "wheat";
document.body.style.backgroundColor = "white";
}
function dianji(btn){
var div = document.getElementById("divv");
// alert(div=="");
// alert(div);
var dis = div.style.display;
// alert(dis=="")
if(dis=="" || dis=="block"){
// alert(1)
div.style.display="none";
btn.innerHTML="显示"
}else{
// alert(2)
div.style.display="block";
btn.innerHTML="隐藏"
}
}
</script>
</body>
</html>
效果截图：
最开始界面：
鼠标悬浮到蓝色按钮：（红色、绿色、粉色相同）
单击隐藏按钮：
扫一扫
609
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
