写了两种JS的方法,其实都是一样的。只不过一个是放在body之前,利用事件加载方法;一个是放在代码的最后面;
1.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#div1 {
width: 200px;
height: 200px;
background: red;
display: none;
}
</style>
<script>
window.onload=function(){//onload在事件加载完成以后执行调用
var oBtn1=document.getElementById('showBtn');
var oBtn2=document.getElementById('hideBtn');
var oDiv=document.getElementById('div1');
var oSb=document.getElementById('sb');
oBtn1.onclick=function(){
oDiv.style.display='block';
oDiv.style.background='yellow'
}
oBtn2.onclick=function(){
oDiv.style.display='none';
}
oSb.onmouseover=function(){
oDiv.style.display='block';
oDiv.style.background='yellow'
}
oSb.onmouseout=function(){
oDiv.style.display='none';
}
}
</script>
</head>
<body>
<input id="showBtn" type="button" value="显示" />
<input id="hideBtn" type="button" value="隐藏" />
<strong id="sb">我也可以显示</strong>
<div id="div1"></div>
<!--<script>
var oBtn1=document.getElementById('showBtn');
var oBtn2=document.getElementById('hideBtn');
var oDiv=document.getElementById('div1');
var oSb=document.getElementById('sb');
function show(){
oDiv.style.display='block';
oDiv.style.background='yellow'
}
oBtn1.onclick=show;
oSb.onmouseover=show;
oSb.onmouseout=hide;
function hide(){
oDiv.style.display='none';
}
oBtn2.onclick=hide;
</script>-->//第二种隐藏的代码段
</body>
</html>
效果图如下:
2.第二种JS方法:
<script>
var oBtn1=document.getElementById('showBtn');
var oBtn2=document.getElementById('hideBtn');
var oDiv=document.getElementById('div1');
var oSb=document.getElementById('sb');
function show(){
oDiv.style.display='block';
oDiv.style.background='yellow'
}
oBtn1.onclick=show;
oSb.onmouseover=show;
oSb.onmouseout=hide;
function hide(){
oDiv.style.display='none';
}
oBtn2.onclick=hide;
</script>