Question

所以我有两个要同时运行的html页面，因为websocket引入了数据线程化和冲突的问题。我认为最好同时运行这两个页面，因为它们都是轻量级的网页，并且在需要时不显示任何一个，反之亦然。

我试图将该方法合并到css文件的header标记中，但是似乎什么也没发生，任何建议都值得感谢！

编辑：我已经有了在两个页面之间切换的切换代码，我只需要知道如何合并display：none函数即可隐藏标题标签。

'''

header {
    height: 53px;
    width: 53px;
    background-color: black;

    display: grid;
    grid-template-columns: 118px 244px 118px;

    padding-top: 3px;

    font-size: 45px;
    color: white;
    text-align: center;
}

.headerBox {
    background-color: #4472C4;
}

.leftDrive {
    background-color: black;

    display: grid;
    grid-template-columns: repeat(2, auto);
    grid-column-gap: 3px; 

    padding-inline-start: 3px;
    padding-inline-end: 4px;

}

.battery {
    background-color: #4472C4;
    display: grid;
    grid-template-columns: repeat(4, auto);
}

.rightDrive {
    background-color: black;

    display: grid;
    grid-template-columns: repeat(2, auto);
    grid-column-gap: 3px; 

    padding-inline-start: 4px;
    padding-inline-end: 3px;
}

<header> 
    <div class="leftDrive">
        <div class="headerBox" id="l_motor">0</div>
        <div class="headerBox" id="l_inverter">0</div>
    </div>
    <div class="battery">
        <div class="headerBox" id="battery_1">0</div>
        <div class="headerBox" id="battery_2">0</div>
        <div class="headerBox" id="battery_3">0</div>
        <div class="headerBox" id="battery_4">0</div>
    </div>
    <div class="rightDrive">
        <div class="headerBox" id="r_inverter">0</div>
        <div class="headerBox" id="r_motor">0</div>
    </div>
</header>

Answer 1

在示例中，我使用一些JS来更改CSS。我添加的按钮更改了ID为“ header”的标头的CSS。但是您可以将display：grid更改为display：none。

function hideheader(){
  document.getElementById("header").style.display = "none";
}

header {
    height: 53px;
    width: 53px;
    background-color: black;

    display: grid;
    grid-template-columns: 118px 244px 118px;

    padding-top: 3px;

    font-size: 45px;
    color: white;
    text-align: center;
}

.headerBox {
    background-color: #4472C4;
}

.leftDrive {
    background-color: black;

    display: grid;
    grid-template-columns: repeat(2, auto);
    grid-column-gap: 3px; 

    padding-inline-start: 3px;
    padding-inline-end: 4px;

}

.battery {
    background-color: #4472C4;
    display: grid;
    grid-template-columns: repeat(4, auto);
}

.rightDrive {
    background-color: black;

    display: grid;
    grid-template-columns: repeat(2, auto);
    grid-column-gap: 3px; 

    padding-inline-start: 4px;
    padding-inline-end: 3px;
}

<header id="header"> 
    <div class="leftDrive">
        <div class="headerBox" id="l_motor">0</div>
        <div class="headerBox" id="l_inverter">0</div>
    </div>
    <div class="battery">
        <div class="headerBox" id="battery_1">0</div>
        <div class="headerBox" id="battery_2">0</div>
        <div class="headerBox" id="battery_3">0</div>
        <div class="headerBox" id="battery_4">0</div>
    </div>
    <div class="rightDrive">
        <div class="headerBox" id="r_inverter">0</div>
        <div class="headerBox" id="r_motor">0</div>
    </div>
</header>

<button onclick="hideheader()">hide</button>

有没有一种方法可以利用标记上的display：none函数删除整个页面？

1 个答案: