javascript 在使用onclick需要点击两次才能触发代码，请问这是怎么回事？

Question

对文档里的一个元素节点创建一个onclick事件处理函数，在测试程序的时候，发现需要点击两次才会触发相应的程序，请问这是怎么回事，望大神帮助，或者有遇到相同情况进来讨论

window.onload=function (){ 
    var op=document.getElementById("p");
    var oUl=document.getElementById("ul");

    op.onclick=function (){ 
        if(oUl.style.display=="none"){
            oUl.style.display="block";
            alert(oUl.style.display);
        }else{ 
            oUl.style.display="none";
            alert(oUl.style.display);
        };
    };
};

#ul{ 
    display: none;
    margin: 0 auto;
    padding: 0;
    width: 100px;
    height: 150px;
    text-align: center;
    list-style-type: none;
    border: 1px solid #ccc;
}

这里我设置了alert(oUl.style.display);进行判断oUl.style.display的值，单点击第一次的时候，提示输出的是none，要点击第二次才输出block，可是我在css中就先设置display="none",请问为什么会这样？

---

在oUl.style.display=="none"此处若改成oUl.style.display！="block" 则不会出现需要点击两次的情况,请问这是怎么回事？

Answer 1

改改代码：

window.onload=function (){ 
    var op=document.getElementById("p");
    var oUl=document.getElementById("ul");

    op.onclick=function (){ 
        if(window.getComputedStyle(oUl).display=="none"){
            oUl.style.display="block";
            alert(oUl.style.display);
        }else{ 
            oUl.style.display="none";
            alert(oUl.style.display);
        };
    };
};

Answer 2

因为你js里的oUl.style.display实际上是用的oUI的内联样式，即style属性设置的样式；而你设置的display，是在css文件里，所以访问不到。
可以使用计算后的样式来设置：oUl.currentStyle //IE 或window.getComputedStyle(oUl) //W3C。
或者使用HTML DOM来访问外联样式：document.styleSheets[0].rules[0].style.display //IE 或

                          document.styleSheets[0].cssRules[0].style.display  //W3C

Answer 3

window.onload=function (){

var op=document.getElementById("p");
var oUl=document.getElementById("ul");

op.onclick=function (evt){ 
    if(oUl.style.display=="none"){
        oUl.style.display="block";
        alert(oUl.style.display);
    }else{ 
        oUl.style.display="none";
        alert(oUl.style.display);
    };
};

};