使用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>