Question

＆＃13;

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';
}

＆＃13;

#stuff {
  display: none;
}

＆＃13;

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

＆＃13;

这种方法有效，但需要两次点击。它似乎无法检测到状态为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>

Answer 2

问问自己：obj.style.display null到底是什么时候？""？如果您实际将其记录到控制台，则会获得obj.style.display。

在您的第一个代码中"none"既不是""也不是else，因此执行"none"案例：它将设置为style。它已经没有显示，只是因为CSS规则，而不是元素本身的直接""属性。

您的第二个代码有效，因为它意味着"none"和"block"的行为方式相同而"none"的行为方式不同，实际情况就是如此（如果您只使用"block"和overflow: auto;）。

Answer 3

您可以直接设置元素的display属性，而不是使用CSS，所以：

<div id="stuff" style="display:none">
  secret stuff
</div>

并摆脱

#stuff { display:none; }

然后你的第一个例子（不需要空检查）就可以了。

按ID显示/隐藏元素

3 个答案: