Question

我有一个可更改div可见性的按钮。它将其从可见变为隐藏，然后在每次按下时返回。如何使div保持隐藏状态并在按下按钮时使其显示。

<script>
function Hide() {
    var x = document.getElementById("box");
    if (x.style.display === "none") {
        x.style.display = "block";
    } else {
        x.style.display = "none";
    }
} 
</script>
<button id="Hidden" onclick="Hide()">Click me</button>
<div id="box"> 
 Sample text.
 </div>

Answer 1

为div添加样式-<div id="box" style ="display: none;">...</div>

Answer 2

DoctorsPerDay

Answer 3

您还可以通过调用<script>函数，在HTML代码的末尾添加Hide()标签。像这样：

<script>
function Hide() {
    var x = document.getElementById("box");
    if (x.style.display === "none") {
        x.style.display = "block";
    } else {
        x.style.display = "none";
    }
} 

</script>
<button id="Hidden" onclick="Hide()">Click me</button>
<div id="box"> 
 Sample text.
 </div>
<script>Hide();</script>

Answer 4

您还可以按以下方式添加无内嵌显示

<script>
function Hide() {
    var x = document.getElementById("box");
    if (x.style.display === "none") {
        x.style.display = "block";
    } else {
        x.style.display = "none";
    }
} 
</script>
<button id="Hidden" onclick="Hide()">Click me</button>
<div id="box" style="display:none"> 
 Sample text.
 </div>

如何将按钮更改为而不是将div从可见更改为不可见，以做相反的事情？

4 个答案: