var oBtn1=document.getElementById('btn1');
var op1=document.getElementsByClassName('p1')[0];
oBtn1.onclick=function(){
var dis=window.getComputedStyle(op1).getPropertyValue("display");
if(dis=="none"){
op1.style.display="block";
}else{
op1.style.display="none";
}
}
}
这个是改进后的代码,因为style只能获取行内样式的,故在这里获取出来是空的,getComputedStyle()方法是window下的方法,获取的是该元素所有的样式,包括继承过来的样式,所以能够取得内联样式display的值。
因为元素的style属性是内联样式,而你的p并没有内联样式,所以第一次就去到了else分支。你要么用class来控制显示隐藏,要么用getComputedStyle方法来判断样式。
window.onload=function () {
因为在第一次的时候
op1.style.display的值是空的所以第一次按下去程序会执行
op1.style.display="none";然后第二次按下去再执行
op1.style.display="block";此时才会显示。