javascript - 按 ID 显示/隐藏元素

Question

function showhide(id) {
  obj = document.getElementById(id);

  if (obj.style.display == 'none' || obj.style.display == null)
    obj.style.display = 'block';
  else
    obj.style.display = 'none';
}

#stuff {
  display: none;
}

<a href="#" onclick="showhide('stuff'); return false;">Click Me</a>

<div id="stuff">
  secret stuff
</div>

这有点管用，但需要点击两次。似乎无法检测到状态为null。

显然，如果我将条件更改为此它有效:

if (obj.style.display == 'block')
        obj.style.display  = 'none';
else
        obj.style.display  = 'block';

我现在的问题是，第一个条件有什么问题？

Answer 1

如果元素的显示是由 CSS 规则指定的，您将需要获取它的计算样式。如果您要替换 div 上的内联样式，您正在做的事情会起作用。

function showhide (id)
{
    obj = document.getElementById(id);
    var displayStyle = obj.currentStyle ? obj.currentStyle.display :
                          getComputedStyle(obj, null).display;
    if (displayStyle == 'none' || displayStyle == null)
        obj.style.display  = 'block';
    else
        obj.style.display  = 'none';
}

#stuff { display:none; }

<a href="#" onclick="showhide('stuff'); return false;">Click Me</a>

<div id="stuff">
    secret stuff
</div>