我想在按下按鈕時顯示元素。默認情況下顯示該元素，如何使其默認不顯示？

Question

該按鈕的所有內容似乎正確，並且與我當前想要的相反。 當我加載頁面div時：myDIV在那並且按鈕切換它消失並重新出現。 如何默認使myDIV不設置，但仍具有按鈕功能作為切換

<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
#myDIV {
  width: 100%;
  padding: 50px 0;
  text-align: center;
  background-color: lightblue;
  margin-top: 20px;
  display:none;
}
</style>
</head>
<body>


<button onclick="myFunction()">test</button>

<div id="myDIV">
This is my DIV element.
</div>



<script>
function myFunction() {
  var x = document.getElementById("myDIV");
  if (x.style.display === "none") {
    x.style.display = "block";
  } else {
    x.style.display = "none";
  }
}
</script>

</body>
</html>

Answer 1

我認為關鍵是在這里style.display =''實際上

使用style.display獲取顯示狀態時，無法獲取CSS中定義的顯示屬性

Answer 2

您需要先獲取CSS值，才能使用JS中的按鈕切換顯示值。 默認情況下，建議不要在HTML上使用內聯樣式。

 function myFunction() { const cont = document.querySelector("#chartContainer"); const styles = getComputedStyle(cont) const displayStyle = styles.display; if(displayStyle === "none"){ cont.style.display = "block"; }else { cont.style.display = "none"; } } const BTN = document.querySelector("button"); BTN.addEventListener('click', myFunction);

 .container { background-color: #FFF; width: 100vw; height: 100vh; margin: 0; padding: 0; display: flex; } #chartContainer { background-color: blue; border-radius: 25px; height: 200px; width: 100%; float: below; display: none; } button { width: 50px; height: 50px; }

 <div class="container"> <button>toggle</button> <div id="chartContainer"> </div> <script src="https://canvasjs.com/assets/script/canvasjs.min.js"> </script> </div>

我想在按下按鈕時顯示元素。默認情況下顯示該元素，如何使其默認不顯示？

問題描述

2 個解決方案

解決方案1
0 已采納 2019-03-23 09:12:53

解決方案2
0 2019-03-23 09:17:57

我想在按下按鈕時顯示元素。 默認情況下顯示該元素，如何使其默認不顯示？

問題描述

2 個解決方案

解決方案1 0 已采納 2019-03-23 09:12:53

解決方案2 0 2019-03-23 09:17:57

我想在按下按鈕時顯示元素。默認情況下顯示該元素，如何使其默認不顯示？

解決方案1
0 已采納 2019-03-23 09:12:53

解決方案2
0 2019-03-23 09:17:57