Question

所以，我正在练习切换开关功能。...

完整的HTML代码

<!DOCTYPE html>
<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="block"

}
</style>
</head>
<body>

<p>Click the "Try it" button to toggle between hiding and showing the DIV element:</p>

<button onclick="myFunction()">Try it</button>

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

<p><b>Note:</b> The element will not take up any space when the display property set to "none".</p>

<script>
function myFunction() {

if (myDIV.style.display == "block") {
    myDIV.style.display = "none";
} else {
    myDIV.style.display = "block";
  }
}
</script>

</body>
</html>

问题：为了使div元素消失，我必须单击两次（仅在首次加载页面时）。我可以通过将 CSS显示设置为 none; 而不是 block; 来解决此问题，但是有人知道实际上是什么原因造成的吗？

我还意识到，在 myDIV.style.display之后加上 === 或 == 或 = 会导致不同的结果。我想知道为什么会这样？

我是一位具有较浅知识的新手，请帮帮我！在此先感谢：）

p.s。我正在尝试的原始内容是：https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_toggle_hide_show

Answer 1

function myFunction() {
if (window.getComputedStyle(myDIV).display == "block") {
    myDIV.style.display = "none";
} else {
    myDIV.style.display = "block";
  }
}

#myDIV {
  width: 100%;
  padding: 50px 0;
  text-align: center;
  background-color: lightblue;
  margin-top: 20px;
}

<p>Click the "Try it" button to toggle between hiding and showing the DIV element:</p>

<button onclick="myFunction()">Try it</button>

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

<p><b>Note:</b> The element will not take up any space when the display property set to "none".</p>

Answer 2

使用您的代码，每当您第一次单击时-myIDV.style.display返回一个空字符串""，为此它将转到else块，将内联样式设置为block，但是已经具有此样式。因此，不会产生任何可见的效果。第一次单击后，它将按您的要求进行。

<!DOCTYPE html>
<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="block"

}
</style>
</head>
<body>

<p>Click the "Try it" button to toggle between hiding and showing the DIV element:</p>

<button onclick="myFunction()">Try it</button>

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

<p><b>Note:</b> The element will not take up any space when the display property set to "none".</p>

<script>
function myFunction() {
console.log(myDIV.style.display);
if (myDIV.style.display == "block") {
    myDIV.style.display = "none";
} else {
    myDIV.style.display = "block";
  }
}
</script>

</body>

这是您想要的解决方案。

<!DOCTYPE html>
<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="block"

}
</style>
</head>
<body>

<p>Click the "Try it" button to toggle between hiding and showing the DIV element:</p>

<button onclick="myFunction()">Try it</button>

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

<p><b>Note:</b> The element will not take up any space when the display property set to "none".</p>

<script>
function myFunction() {
 var style = getComputedStyle(myDIV);
if (style.getPropertyValue("display") == 'block') {
     myDIV.style.display = "none";
} else {
    myDIV.style.display = "block";
  }
}
</script>

</body>
</html>

需要一些帮助来澄清JavaScript中的“ display.style”

2 个答案: