使用JavaScript切换元素的可见性

Question

尝试使用JavaScript切换元素的可见性。 它正在工作，但是我必须先单击一次，但这当然不是最佳选择。 有人可以指出为什么这不能正常工作吗？

 function toggle_visibility(id) { var e = document.getElementById(id); if(e.style.display == 'block') e.style.display = 'none'; else e.style.display = 'block'; } 

 #foo { display: block; } 

 <a href="#" onclick="toggle_visibility('foo');">Click here to toggle visibility of element #foo</a> <div id="foo">This is foo</div> 

Answer 1

颠倒您的if和else测试。 JavaScript不能从style读取CSS属性，除非它明确设置了它们：

 function toggle_visibility(id) { var e = document.getElementById(id); if(e.style.display == 'none') e.style.display = 'block'; else e.style.display = 'none'; } 

 #foo { display: block; } 

 <a href="#" onclick="toggle_visibility('foo');">Click here to toggle visibility of element #foo</a> <div id="foo">This is foo</div>