[英]Hide and Show Div tag in 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: 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>
為什么會這樣，有人可以讓我知道我在哪里犯錯嗎？
正如在 SO 上的這個答案所解釋的那樣，只有內聯樣式或應用於元素的樣式作為元素的屬性，例如<div style="diplay:none;"></div>將在您訪問element.style時顯示element.style 您需要訪問computedStyle以從文檔中的任何位置獲取應用於元素的樣式。
要獲取元素的computedStyle ，您可以使用：
window.getComputedStyle(element).display
因此，您的 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";
}
}
在這里嘗試：
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>
第一次單擊時，頁面上找不到 div 元素，因為 CSS 使其display: none 。 所以第一個 if 塊沒有被執行。 它在第一次單擊時將元素display設置為none ，在第二次單擊時將值更改為block 。
所以，我們需要在第一次點擊時檢查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>
與@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>
問題是最初 style.display 沒有設置為任何東西（內聯樣式尚未設置）。
因此，不要測試“無”，而是測試“非阻塞”。 這樣，即使在第一次通過時也可以完成測試。
<,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>
一種優雅的方法是簡單地使用切換 function。 您只需添加一個可以切換的隱藏 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>
根據JS中html標簽的類和id（增量）隱藏和顯示div
[英]Hide and Show div depending on class and id (Incrementally) of html tag in JS
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.