通过style.display来写元素的显示隐藏效果。第一次点击希望它显示竟然没有效果。需要点2次的原因

点击按钮来显示隐藏上面的aaaaaaa。

初始状态他是隐藏的。

   

    

    

    

 

    

        aaaaaaaaaaaaaaaaaaa

    

    显示

    

 

 

这样写的话。就会出现第一次点击无效。需要第二次点击才出现效果。这是为什么呢？

因为elem.style.display这样获取的是elem元素的行内样式。但是默认的行内没有样式的。所以他第一次点击的时候就走了else。给他加了一个行内的样式。然后再点击就是正常需要的效果了、

 

那如何解决这个问题呢？看看下面的链接就知道啦

window.getComputedStyle() 方法的使用

 

btn.οnclick=function(){

    var elem=document.getElementById("div");

    var btn=document.getElementById("btn");

    if(window.getComputedStyle(elem, null).display=="none"){

        btn.innerHTML="隐藏";

        elem.style.display="block";

    }else{

        btn.innerHTML="显示";

        elem.style.display="none";

    }