Javascript onclick的怪异行为

我有一个汉堡菜单，需要注册点击（然后我将展开菜单…）

汉堡图标/菜单的HTML为：

<div class="burger-menu-holder">
    <a href="#" id="burger-menu">
        &#9776;
    </a>
</div>

注册单击并运行函数的Javascript为：

var burger = document.getElementById("burger-menu");
burger.addEventListener('click', function(){
    if(burger.style.display=='block'){
        alert("LOL");
    }
}, false);

---

但是，当我点击菜单时，什么也没发生。控制台中没有错误，但是当我删除if（burger.style.display=='block'）时，它工作了，这让我相信，出于某种原因，它没有正确测试CSS属性。

问题是，burger最初没有

style=“display:block；”

（即使它是可见的），因此，

burger.style.display==“block”

失败

测试元素CSS样式不是非常可靠的方法。我会去上课：

var burger = document.getElementById("burger-menu");
burger.addEventListener('click', function() {
    if (burger.className === 'show') {
        alert("LOL");
    }
}, false);

HTML:

类名的另一个优点是，您可以轻松地更改和设置

显示
行为的样式，而不会影响javascript代码。
可以这样尝试：

<div class="burger-menu-holder">
    <a href="#" id="burger-menu" style="display: block;">
        &#9776;
    </a>
</div>

DOM属性
元素.style.
将只获取内联定义的样式，例如：

<a href="#" id="burger-menu" style="display: block;">



对于测试样式，请使用css类。（查看dfsq的答案）
手动设置的“样式”参数与计算样式之间的差异

看看webkit/opera中的getComputedStyle，IE中的currentStyle。各种工具包提供了更好的访问方式。
如前所述，这不是一种最佳的测试方式。但是，如果需要，可以使用，然后获取
显示值
，如下所示：

var burger = document.getElementById("burger-menu");

burger.addEventListener('click', function(){
  // Get the computed display value after the stylesheet has been applied
  var display = window.getComputedStyle(burger).getPropertyValue("display");
  if(display === "block"){
     alert("LOL");
  }
}, false);


仅供参考：
burger.addEventListener
将在IE8或更低版本上失败，因为它们使用的是
attachEvent
。如果您需要支持它们，那么最懒惰的将是使用
burger.onclick=function（）{…}
。
<a href="#" id="burger-menu" style="display: block;">

var burger = document.getElementById("burger-menu");

burger.addEventListener('click', function(){
  // Get the computed display value after the stylesheet has been applied
  var display = window.getComputedStyle(burger).getPropertyValue("display");
  if(display === "block"){
     alert("LOL");
  }
}, false);