javascript 选择要包含的元素

Question

我有两个元素，第一个是默认在屏幕上打印

<input id=post-category value="first">

另一个是这个，它只会在点击时显示，当然第一个元素必须显示

<select id=cat-sel ><option>second</option></select>

已更新我试过这段代码

el = document.getElementById("post-category");
el.style.visibility = "hidden";

el2 = document.getElementById("cat-sel");
el2.style.visibility = "visible";

但这里的问题是，第二个元素是缩进的。因为它逃脱了第一个元素的空间。我不喜欢那样，我希望他们处于相同的位置

Answer 1

更改为

el = document.getElementById("post-category");
el.style.display = "none";

el2 = document.getElementById("cat-sel");
el2.style.display = "block";

因为可见/隐藏不会删除元素在页面上占用的空间

需要在初始需要隐藏的字段上设置display:none

假设一个复选框有

window.onload=function() {
  document.getElementById("categoryCheckbox").onclick=function() {
    var chk = this.checked;
    document.getElementById("post-category").style.display = chk?"none":"block";
    document.getElementById("cat-sel").style.display = chk?"block":"none";
  }
}

PS:顺便说一句，显示/隐藏需要更多代码才能在重新加载后继续存在...