隐藏标签时如何停止这些 的使用空间？

debugcn 发表于 Dev

轻率

我有5个单选按钮，每按一次，就会调用隐藏/显示我需要的输入标签的函数。

我使用过document.getElementById("id").style.display="none";并且可以使用，但是仍然需要空间。

我希望表单的输入在它们上方的元素被隐藏时填充其上方的空间。我认为问题是 用于分隔输入的标签，如何解决此问题？

JS功能：

function showInsert() {
    document.getElementById("id").style.display="none";
    document.getElementById("nome").style.display="initial";
    document.getElementById("provincia").style.display="initial";

    document.getElementById("idLabel").style.display="none";
    document.getElementById("nomeLabel").style.display="initial";
    document.getElementById("provinciaLabel").style.display="initial";
}

HTML输入（如果重要的话，采用表格形式）：

<label for="provincia" id="idLabel">ID:</label><br>
<input type="text" name="id" id="id" placeholder="ID da ricercare" /><br>

<label for="provincia" id="nomeLabel">Nome:</label><br>
<input type="text" name="nome" id="nome" placeholder="Nome da ricercare" /><br>

<label for="provincia" id="provinciaLabel">Provincia:</label><br>
<input type="text" name="provincia" id="provincia" placeholder="Provincia da ricercare" /><br>

丹尼尔·奈特斯

 用于文本中的换行符，而不用于常规布局。

或者，您可以将表单设置为display: flex;：

function showInsert() {
  document.getElementById("id").style.display = "none";
  document.getElementById("nome").style.display = "initial";
  document.getElementById("provincia").style.display = "initial";

  document.getElementById("idLabel").style.display = "none";
  document.getElementById("nomeLabel").style.display = "initial";
  document.getElementById("provinciaLabel").style.display = "initial";
}

form {
  display: flex;
  flex-direction: column;
  width: 200px;
}

<form>
  <label for="provincia" id="idLabel">ID:</label>
  <input type="text" name="id" id="id" placeholder="ID da ricercare" />

  <label for="provincia" id="nomeLabel">Nome:</label>
  <input type="text" name="nome" id="nome" placeholder="Nome da ricercare" />

  <label for="provincia" id="provinciaLabel">Provincia:</label>
  <input type="text" name="provincia" id="provincia" placeholder="Provincia da ricercare" />
</form>

<button onclick="showInsert()">Show Insert</button>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。