onclick控制元素显示与隐藏时,点击第一次无反应的原因

代码如下:

<style> 
 #div1 { 100px; height: 100px; border: 1px solid red;}
 #p1 {height: 30px; background: green; display: none;} 
<style>
<div id="div1">div1</div>
<p id="p1">p1</p>

var oDiv = document.getElementById('div1');
var oP = document.getElementById('p1');
oDiv.onclick = function(){
    if(oP.style.display=='none'){
        oP.style.display='block';
    }else{
        oP.style.display='none';
    }
}

上面的代码想要实现的效果是,当我点击DIV的时候,如果ul是隐藏的,那么显示出来,否则,就隐藏.但是当我点击第一次的时候,它总是没有反应,必须点击第二次的时候,才能正常工作.

这是因为第一次点击的时候,虽然p在CSS设置为display:none;但是用if(oP.display==='none')并无法获取到display的属性值.只有当我们把display:'none';写在行间样式的时候,才会被识别.

解决办法就是用一个方法,去获取计算过后的样式,也就是确切的属性

function getStyle(obj,attr){
     if(obj.currentStyle){//IE
        return obj.currentStyle[attr];
     }else{//ff
        return getComputedStyle(obj,false)[attr];
     }
 }

这样上面的效果代码应该改为:

 oDiv.onclick=function(){
  if(getStyle(oP,'display')==='none')
   oP.style.display='block';
  else
   oP.style.display='none';
}