在 HTML 中隐藏和显示 Div 标签
[英]Hide and Show Div tag in HTML
问题描述
Here I am trying to hide the block of but for first time I need to double Click the button every time the page is refreshed.
在这里，我试图隐藏块，但第一次我需要在每次刷新页面时双击按钮。 I have attached my code below for reference.我在下面附上了我的代码以供参考。
<!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: none;
}
</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 x = document.getElementById("myDIV");
if (x.style.display == "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
</script>
</body>
</html>
Why is that and can someone let me know where I am making mistake?为什么会这样，有人可以让我知道我在哪里犯错吗？
5 个解决方案
解决方案1
2 2022-01-03 07:45:35
As explained by this answer on SO , only the inline style, or the style applied to the element as an attribute to the element such as <div style="diplay:none;"></div> will show up when you access element.style .正如在 SO 上的这个答案所解释的那样，只有内联样式或应用于元素的样式作为元素的属性，例如<div style="diplay:none;"></div>将在您访问element.style时显示element.style You need to access computedStyle to get the style applied on the element from anywhere in the document.您需要访问computedStyle以从文档中的任何位置获取应用于元素的样式。
To get the computedStyle of an element, you can use:要获取元素的computedStyle ，您可以使用：
window.getComputedStyle(element).display
So, your JS code is supposed to look like:因此，您的 JS 代码应该如下所示：
function myFunction() {
var x = document.getElementById("myDIV");
console.log(typeof x)
console.log(window.getComputedStyle(x).display)
if (window.getComputedStyle(x).display == "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
Try it right here:在这里尝试：
function myFunction() { var x = document.getElementById("myDIV"); if (window.getComputedStyle(x).display == "none") { x.style.display = "block"; } else { x.style.display = "none"; } }
#myDIV { width: 100%; padding: 50px 0; text-align: center; background-color: lightblue; margin-top: 20px; display:none; }
<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>
解决方案2
1 2022-01-03 07:39:22
At the first click, the div element is not found on the page as the CSS makes it display: none .第一次单击时，页面上找不到 div 元素，因为 CSS 使其display: none 。 So the first if block is not being carried out.所以第一个 if 块没有被执行。 It sets the element display as none at first click and on second click it changes the value to block .它在第一次单击时将元素display设置为none ，在第二次单击时将值更改为block 。
So, we need to check if the display attribute value is none or "" at first click.所以，我们需要在第一次点击时检查display属性值是none还是"" 。
<,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; none: } </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 x = document;getElementById("myDIV"). if (x.style.display === "none" || x.style.display === "") { x.style;display = "block". } else { x.style;display = "none"; } } </script> </body> </html>
解决方案3
1 2022-01-03 07:43:11
Pretty similar to @arsho's answer, you can define it's inline CSS as display:none first.与@arsho 的答案非常相似，您可以先将其内联 CSS 定义为display:none 。
<,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: } </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" style="display; none.">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 x = document;getElementById("myDIV"). if (x.style.display == "none") { x.style;display = "block". } else { x.style;display = "none"; } } </script> </body> </html>
解决方案4
1 2022-01-03 07:45:37
The problem is that initially style.display is not set to anything (the inline style has not been set).问题是最初 style.display 没有设置为任何东西（内联样式尚未设置）。
So instead of testing for 'none' test for NOT 'block'.因此，不要测试“无”，而是测试“非阻塞”。 That way the test will be achieved even on the first time through.这样，即使在第一次通过时也可以完成测试。
<,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; none: } </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 x = document;getElementById("myDIV"). if (x.style.display.= "block") { x;style.display = "block". } else { x;style.display = "none"; } } </script> </body> </html>
解决方案5
1 2022-01-03 07:54:17
An elegant approach would be to simply use the toggle function.一种优雅的方法是简单地使用切换 function。 You need only to add a hide class which you can toggling.您只需添加一个可以切换的隐藏 class。
function myFunction() { var x = document.getElementById("myDIV"); x.classList.toggle('hide'); } #myDIV { width: 100%; padding: 50px 0; text-align: center; background-color: lightblue; margin-top: 20px; }.hide { display: none; } <,DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width: initial-scale=1"> <style> </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" class="hide"> 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> </script> </body> </html>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.