如何隐藏 <div> [重复]
Posted
技术标签:
【中文标题】如何隐藏 <div> [重复]【英文标题】：How to hide <div> [duplicate] 【发布时间】：2022-01-14 15:13:37 【问题描述】：我正在为朋友制作一个恶作剧 .html 页面。恶作剧是，你按下一个按钮，按钮下就会弹出一个短语。我想出了一种隐藏短语并取消隐藏它的方法。问题是，当您加载到页面时，该短语已经出现在屏幕上。如何在页面加载时隐藏它？
function Function()
var x = document.getElementById("urmom");
if (x.style.display === "none")
x.style.display = "block";
else
x.style.display = "none";
<p>Click the "Try it" button to toggle between hiding and showing the DIV element:</p>
<button onclick="Function()">Try it</button>
<div id="urmom">
ur mom
</div>
<p><b>Note:</b> The element will not take up any space when the display property set to "none".</p>【问题讨论】：
为什么不直接使用 CSS？#urmom display:none;
与onclick 一样，实际上，尽管您应该使用event handlers 而不是HTML 属性。或者使用 CSS，这肯定会更容易。
【参考方案1】：
先用 CSS 设置为 NONE。
function Function()
var x = document.getElementById("urmom");
if (x.style.display === "none")
x.style.display = "block";
else
x.style.display = "none";
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<p>Click the "Try it" button to toggle between hiding and showing the DIV element:</p>
<button onclick="Function()">Try it</button>
<div id="urmom" style="display:none">
ur mom
</div>
<p><b>Note:</b> The element will not take up any space when the display property set to "none".</p>
</body>
</html>【讨论】：
以上是关于如何隐藏 <div> [重复]的主要内容，如果未能解决你的问题，请参考以下文章