<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
#div1{width: 100px;height: 100px;background-color: blue;display: none;position: absolute;z-index: 99999;}
</style>
<script type="text/javascript">
window.onload=function () {
var oBtn1=document.getElementById('btn1');
var oDiv1=document.getElementById('div1');
oBtn1.onclick=function(){
if(oDiv1.style.display=="none"){
oDiv1.style.display="block";
}else{
oDiv1.style.display="none";
}
}
}
</script>
</head>
<body>
<button id="btn1">aaa</button><br />
<div id="div1"></div>
</body>
</html>二楼正解，我改了下代码：
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
#div1{width: 100px;height: 100px;background-color: blue;display: none;position: absolute;z-index: 99999;}
</style>
<script type="text/javascript">
window.onload=function () {
var oBtn1=document.getElementById('btn1');
var oDiv1=document.getElementById('div1');
***console.log("after loaded: "+oDiv1.style.display);***
oBtn1.onclick=function(){
if(oDiv1.style.display=="none"){
oDiv1.style.display="block";
}else{
oDiv1.style.display="none";
}
***console.log("after click:"+oDiv1.style.display);***
}
}
</script>
</head>
<body>
<button id="btn1">aaa</button><br />
<div id="div1"></div>
</body>
</html>输出：
因为在第一次的时候oDiv1.style.display的值是空的
所以第一次按下去程序会执行oDiv1.style.display="none";
然后第二次按下去再执行oDiv1.style.display="block";
此时才会显示。
window.onload=function () {
var oBtn1=document.getElementById('btn1');
var oDiv1=document.getElementsByClassName('div1')[0];
oBtn1.onclick=function(){
var dis=window.getComputedStyle(oDiv1).getPropertyValue("display");
if(dis=="none"){
oDiv1.style.display="block";
}else{
oDiv1.style.display="none";
}
}
}
这个是改进后的代码，因为style只能获取行内样式的，故在这里获取出来是空的，getComputedStyle()方法是window下的方法，获取的是该元素所有的样式，包括继承过来的样式，所以能够取得内联样式display的值。因为元素的style属性是内联样式，而你的div并没有内联样式，所以第一次就去到了else分支。你要么用class来控制显示隐藏，要么用getComputedStyle方法来判断样式。