请问我做的这个按钮为什么需要点击两次才能激活呢

Question

#smile_bg{margin:0; padding:0; background:url(images/smile_bg.gif) no-repeat;width:435px; height:304px; margin-top:-5px; display:none;}
function smile_Swich() {
    if (GetByID('smile_bg').style.display == 'none') {
        GetByID('smile_bg').style.display = 'block';
    } else {
        GetByID('smile_bg').style.display = 'none';
    }
}
function GetByID(str) {
    var v = document.getElementById(str);
    return v;
}
<img src="images/111.gif" onclick="smile_Swich()" />我点击按钮两次才能把我想要显示的元素显示出来，以后点击就可以点击一次激活显示和隐藏了，为什么呢？

Answer 1

从代码上看是没有任何问题的楼主我个人觉得问题应该是出在了图片的预加载的问题上了你这样，将css里面的display：none去掉在你的window.onload里面再将其隐藏试试，应该就可以了的

Answer 2

GetByID('smile_bg').style.display获取不到样式设置的none的
所以第一次获取到的是null，和=='none'对比不对，执行了GetByID('smile_bg').style.display = 'none';第二次由于第一次设置了none，所以对比成功，执行了block语句if (GetByID('smile_bg').style.display != 'block') {/////改成这样判断就好了
        GetByID('smile_bg').style.display = 'block';
    } else {
        GetByID('smile_bg').style.display = 'none';
    }