"display.style" 在 JavaScript 中做什么？

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 display 设置为 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 return 一个空字符串 ""，为此它会转到其他块，将内联样式设置为块，但它有已经这样 style.So 你不会看到任何可见的 effect.After 第一次点击 - 它会如你所愿。

<!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>

"display.style" 在 JavaScript 中做什么？

What does "display.style" do in JavaScript?

html

javascript

css

toggle