簡體   English   中英

如何將 DIV 默認設置為 style.display = “none”?

[英]How do I make a DIV set to style.display = “none” by default?

我正在嘗試制作一個按鈕,當它被點擊時會顯示其他文本,但是,我只能制作它

  • a) 默認顯示文本或
  • b)默認隱藏文本,但按鈕不起作用。

這是按鈕的JS代碼:

 function showInfo() { var x = document.getElementById("myDIV"); if (x.style.display === "none") { x.style.display = "block"; } else { x.style.display = "none"; } }
 <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/> <div id="myDIV"> Hello World </div> <button type="button" class="btn btn-primary" click="showInfo()"> Show Info </button>

有沒有辦法可以將默認 style.display 設置為 none?

您應該使用 CSS 為任何元素設置默認樣式 - 通過鏈接到外部 CSS 文件或在 Z4C4AD5FCA2E7A3F74DBB1CED00381AAZ4 文件中的開始和結束<style>標簽之間。

像這樣

 #myDIV { display: none; }

您的 JS 代碼似乎沒有問題。

反而

請更正您的 HTML,它是“點擊”而不是“點擊”

<button onclick="showInfo()">

您的處理程序是click 它需要是onclick 另外,我建議將帶有display:none的 class 添加到您的div中,或者簡單地內聯它,如下所示:

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div id="myDIV" style="display: none">
 Hello World
</div>
<button onclick="showInfo()">
Show Info
</button>

然后你的 JS 可以如下所示:

function showInfo() {
  var x = document.getElementById("myDIV");
  if (x.style.display === "none") {
    return x.style.display = "block";
  }
  return x.style.display = "none";
}

演示

 function showInfo() { var x = document.getElementById("myDIV"); if (x.style.display === "none") { return x.style.display = "block"; } return x.style.display = "none"; }
 <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/> <div id="myDIV" style="display: none"> Hello World </div> <button onclick="showInfo()"> Show Info </button>

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM