Question

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

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

另一个是这个，只会显示是否有一些onclick，当然第一个元素必须炫耀

<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：显示/隐藏需要更多的代码才能在重新加载后继续存在......

Answer 2

为您的ID定义CSS并修复位置。

javascript选择包含元素的内容

2 个答案: