使用JavaScript切换元素的可见性

Toggle visibility of an element with JavaScript

本文关键字：可见性 元素 JavaScript 使用      更新时间：2023-09-26

尝试用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>

反转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>

相关文章：