Question

我有一个需要注册点击的汉堡菜单（我将展开菜单..）

汉堡图标/菜单的HTML是：

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

CSS很简单：

#burger-menu{
    display: block;
}

注册点击并运行该功能的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属性。

Answer 1

问题是汉堡最初没有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：

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

在CSS中：

.show {
    display: block;
}

类名的另一个好处是，您可以轻松更改和设置show行为，而不会影响JavaScript代码。

Answer 2

尝试这样：

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

Answer 3

DOM属性element.style.something将只获得内联定义的样式，例如：

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

对于测试样式，请使用css类。（看看 dfsq 的回答）

Answer 4

手动设置＆＃34;样式＆＃34;之间的区别参数和计算出的风格。

所以看一下例如webkit / opera中的getComputedStyle，IE中的currentStyle。各种工具包提供了更好的方法来访问它。

Answer 5

如上所述，它不是最佳的测试方式。但是，如果您愿意，可以使用getComputedStyle，然后使用getPropertyValue获取display值，如下所示：

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);

jsFiddle here

使用Javascript onclick的奇怪行为

5 个答案: