javascript - Electron :如何通过按钮隐藏/显示<br/>和<hr/>？

Question

使用 Electron 开发Windows应用程序来解析我的json文件。单击按钮以打开，编辑和保存相应的json文件。相关的html代码是

  <div class="rightfixed">
      <div id="jsonName">Empty.</div>
      <div id="TimeJson">
        <div id="Time_StartUTCTimeT"><b>Start UTC Time</b><br />UTC Time when simulation start. [year-month-day
          hour:minute:second.microsecond]</div>
        <input id="Time_StartUTCTime"><br /></input>
        <div id="Time_CelebodyTimeStepT"><b>Celebody Time Step (ms)</b><br />Calculation period for celebody simulation.</div>
        <input id="Time_CelebodyTimeStep"><br /></input>
        <div id="Time_DynamicsTimeStepT"><b>Dynamics Time Step (ms)</b><br />Calculation period for dynamic simulation.</div>
        <input id="Time_DynamicsTimeStep"><br /></input>
        <div id="Time_KinematicsTimeStepT"><b>Kinematics Time Step (ms)</b><br />Calculation period for kinematics simulation.</div>
        <input id="Time_KinematicsTimeStep"><br /></input>
        <div id="Time_OutputTimeStepT"><b>Output Time Step (ms)</b><br />Output archive period for simulation results.</div>
        <input id="Time_OutputTimeStep"><br /></input>
        <div id="Time_TotalSimulationTimeT"><b>Total Simulation Time (s)</b><br />Overall simulation duration.</div>
        <input id="Time_TotalSimulationTime"><br /></input>
      </div>

      <div id="EnvironmentJson">
        <div id="Env_EnvironmentModel" style="font-weight:bold;font-size:16px;">EnvironmentModel<br /></div>
        <hr />
        <div id="Env_iCSnT"><b>Gravity Mode Order</b><br />Harmonic order of gravity model (iCSn).</div>
        <input id="Env_iCSn"><br /></input>
        <div id="Env_iCSmT"><b>Gravity Mode Series</b><br />Harmonic series of gravity model (iCSm).</div>
        <input id="Env_iCSm"><br /></input>

        <div id="Env_iGHnT"><b>Magnetic Mode Order</b><br />Harmonic order of magnetic model (iGSn).</div>
        <input id="Env_iGHn"><br /></input>
        <div id="Env_iGHmT"><b>Magnetic Mode Series</b><br />Harmonic series of magnetic model (iGSm).</div>
        <input id="Env_iGHm"><br /></input>
      </div>
  </div>

和js代码是

function TimeJsonInfo_Show() {
    Time_StartUTCTime.style.display = "block";
    Time_CelebodyTimeStep.style.display = "block";
    Time_DynamicsTimeStep.style.display = "block";
    Time_KinematicsTimeStep.style.display = "block";
    Time_OutputTimeStep.style.display = "block";
    Time_TotalSimulationTime.style.display = "block";

    Time_StartUTCTimeT.style.display = "block";
    Time_CelebodyTimeStepT.style.display = "block";
    Time_DynamicsTimeStepT.style.display = "block";
    Time_KinematicsTimeStepT.style.display = "block";
    Time_OutputTimeStepT.style.display = "block";
    Time_TotalSimulationTimeT.style.display = "block";
}
function TimeJsonInfo_Hide() {
    Time_StartUTCTime.style.display = "none";
    Time_CelebodyTimeStep.style.display = "none";
    Time_DynamicsTimeStep.style.display = "none";
    Time_KinematicsTimeStep.style.display = "none";
    Time_OutputTimeStep.style.display = "none";
    Time_TotalSimulationTime.style.display = "none";

    Time_StartUTCTimeT.style.display = "none";
    Time_CelebodyTimeStepT.style.display = "none";
    Time_DynamicsTimeStepT.style.display = "none";
    Time_KinematicsTimeStepT.style.display = "none";
    Time_OutputTimeStepT.style.display = "none";
    Time_TotalSimulationTimeT.style.display = "none";
}
function EnvironmentJsonInfo_Show() {
    Env_EnvironmentModel.style.display = "block";
    Env_iCSn.style.display = "block";
    Env_iCSm.style.display = "block";
    Env_iGHn.style.display = "block";
    Env_iGHm.style.display = "block";

    Env_iCSnT.style.display = "block";
    Env_iCSmT.style.display = "block";
    Env_iGHnT.style.display = "block";
    Env_iGHmT.style.display = "block";
}
function EnvironmentJsonInfo_Hide() {
    Env_EnvironmentModel.style.display = "none";
    Env_iCSn.style.display = "none";
    Env_iCSm.style.display = "none";
    Env_iGHn.style.display = "none";
    Env_iGHm.style.display = "none";

    Env_iCSnT.style.display = "none";
    Env_iCSmT.style.display = "none";
    Env_iGHnT.style.display = "none";
    Env_iGHmT.style.display = "none";
}
btnTimeJson.onclick = function () {
    var Path = jsonPath.innerHTML + "\\Time.json"
    fs.exists(Path, (flag) => {
        if(!flag)
            jsonName.innerHTML = "Time.json does not exist."
        else
            jsonName.style.display = "none"
            fs.readFile(Path,(_err,str) => {
                jsonName.innerHTML = basename(Path)
                jsonContent = JSON.parse(str)
                Time_StartUTCTime.value = jsonContent.StartUTCTime
                Time_CelebodyTimeStep.value = jsonContent['CelebodyTimeStep(ms)']
                Time_DynamicsTimeStep.value = jsonContent['DynamicsTimeStep(ms)']
                Time_KinematicsTimeStep.value = jsonContent['KinematicsTimeStep(ms)']
                Time_OutputTimeStep.value = jsonContent['OutputTimeStep(ms)']
                Time_TotalSimulationTime.value = jsonContent['TotalSimulationTime(s)']

                EnvironmentJsonInfo_Hide()
                TimeJsonInfo_Show()
           })
    })
}

初始化窗口后，类似于ozt_code以外的所有<div>隐藏。
window initialized
但是，jsonName和<br />仍然存在。
例如，当单击<hr />按钮时，该窗口将在Time中显示我的Time.json的内容。窗口似乎正常。
window clicking Time button
但是，当我单击<div id="TimeJson">按钮时，Environment中的<br />在<div id="TimeJson">中的内容之前出现了多个空白行。
enter image description here
有谁知道如何解决这一问题？还是有更好的解决方案来创建一个应用程序来在一个窗口中编辑多个json文件？我知道代码很糟糕，因为我只学习了html/electron了几天:-)

Answer 1

br和hr就像可以被display: none隐藏的其他元素

br,
hr {
  display: none;
}

a
<br /> b
<hr /> c

您可以将它们放在显示/隐藏的div中，以便仅在可见其 parent 的情况下才会显示它们。

我不会使用<hr />和<br />，而是border和margin来拆分设计(ass CSS)和内容(如html)

另一个注意事项:我还将摆脱所有样式修改(例如style.display = 'none')，并使用基于CSS的显示(例如data-属性)。
例如:

const parent = document.querySelector('.parent');

document.querySelectorAll('button').forEach((button, index) => {
  button.addEventListener('click', () => {
    parent.setAttribute('data-item', index + 1);
  });
});

.parent div {
  display: none;
}

.parent[data-item="1"] .child1,
.parent[data-item="2"] .child2,
.parent[data-item="3"] .child3,
.parent[data-item="4"] .child4 {
  display: block;
}

<div class="parent">
  <div class="child1">child 1</div>
  <div class="child2">child 2</div>
  <div class="child3">child 3</div>
  <div class="child4">child 4</div>
</div>

<button>Show element 1</button>
<button>Show element 2</button>
<button>Show element 3</button>
<button>Show element 4</button>