使用JavaScript切换元素的可见性 [英] Toggle visibility of an element with JavaScript

问题描述

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

Trying to toggle the visibility of an element with JavaScript. It's working, but I have to click once first, which of course isn't optimal. Can someone point out to me why this isn't working properly?

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属性，除非它明确设置了它们:

Reverse your if and else tests. JavaScript can't read CSS properties from style unless it explicitly sets them:

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>

这篇关于使用JavaScript切换元素的可见性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！