Question

嗨，我想我的页面中的某些元素只有在选中一个复选框时才会出现，而当它没有时会消失。

所以我有这个HTML：

<td><input type="checkbox" onchange="test('f1')"> Is selected?</td>
<div id="f1">some content</div>

和JavaScript：

function test(id) {
  if (document.getElementById(id).style.visibility === "hidden") {
      document.getElementById(id).style.visibility = "visible";
  } else {
      document.getElementById(id).style.visibility = "hidden";
  }
}

和CSS：

#f1 {visibility: hidden;}

现在它工作但不完美，因为第一个选择总是被隐藏。

Answer 1

正如Juhana在评论中所说，您正在寻找的答案（链接中完美解释）是：.style.*仅查看inline个元素，引用：

“element.style属性只让您知道在该元素中定义为内联的CSS属性（以编程方式或在元素的style属性中定义），您应该获得计算出的样式。“

如果您稍微调整一下您的功能以检查是否尚未设置.style.visibility（因此''），则会在首次点击时切换它。

function changeVisiblity() {
    if ( getContent.style.visibility == "hidden" || getContent.style.visibility == '' ) {
        getContent.style.visibility = "visible";  
    } else {
        getContent.style.visibility = "hidden";    
    }
}

其次，尝试教会自己远离HTML元素中的onclick，因为这使得维护未来变得更加困难。

var getCheckbox = document.getElementById("testcheckbox"),
    getContent = document.getElementById("f1");

getCheckbox.addEventListener( 'change', changeVisiblity, null );

Demo Fiddle: http://jsfiddle.net/4yfWD/

如果可见性设置为隐藏，为什么JavaScript没有看到

1 个答案: