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';
我现在的问题是,第一个条件有什么问题?
最佳答案
如果元素的显示是由 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>
关于javascript - 按 ID 显示/隐藏元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43854637/