Javascript隐藏DIV HTML答案

【问题标题】：Javascript hide DIV HTMLJavascript隐藏DIV HTML
【发布时间】：2016-11-22 00:18:42
【问题描述】：

嘿，我可以隐藏我的 div，但我的问题是，如果我重新加载我的页面，我总是会看到隐藏的 div 一秒钟。

有人知道如何解决这个问题吗？

【问题讨论】：

分享你的代码
您想查看您的答案并接受其中一个吗？

【解决方案1】：

要解决此类问题，您需要将 <div> 与属性 hidden 或内联的东西放在一起。然后你需要用JS隐藏它并删除内联的东西。

$(function () {
  $(".hide").hide().removeClass("hide");
});

.hide {display: none;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="hide">I am not shown</div>

方法二：使用hidden属性。

$(function () {
  $(".hide").hide().removeAttr("hidden");
});

.hide {display: none;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div hidden>I am not shown</div>

方法3：使用hidden属性和.prop()。

$(function () {
  $(".hide").hide().prop("hidden", false);
});

.hide {display: none;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div hidden>I am not shown</div>

【讨论】：

我喜欢你把它转成 sn-p 这样我们什么都看不到
@Ivaro18 哈哈哈...邪恶的微笑。

【解决方案2】：

在应用到 div 的 CSS 中，添加：

display:none;

所以 div 将被加载但不可见。当你需要它的时候，你可以做你现在正在做的事情

【讨论】：

【解决方案3】：

只需将 hidden 属性添加到您的 div，它应该可以解决您的问题，然后在您想要显示它时通过 javascript 将其删除

【讨论】：

【解决方案4】：

$(document).ready(function() {
    $('#myDiv').hide();
});

<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>
<body>
  <div id="myDiv"><p>hello</p></div>
  </body>

是的，您可以通过 javascript 创建 div。

var div = document.createElement("Div");
var text = document.createTextNode("this is my Div")
div.appendChild(text);
document.body.appendChild(div);

<body>
  </body>

【讨论】：

不！不是答案。
除非需要，否则不应使用客户端 Javascript 创建 DOM 元素；尤其是当解决方案像一行 CSS 一样简单时。
据我所知，在运行 javascript 的任何时候，您都会看到 div。直到您隐藏它。
它会起作用，当然，但作为问题的答案，它完全是矫枉过正——人们不应该使用 4 行 JS 来实现他们可以在 CSS 中使用两个单词和一个冒号来实现的目标。跨度>
在 CSS 中使用display: none 可以更轻松地解决问题。根本不需要用JS来新建一个div。一行 CSS 将很快被浏览器解析，比编写整个 JS 函数来隐藏单个 div 更好。