隐藏身体，直到完成加载

Question

我创建了此代码，因此我的页面将被隐藏，直到完成加载为止。 但是我的代码无法正常工作。 我希望这可以隐藏BODY直到触发OnLoad事件为止。 但是，它只是保持隐藏状态。

如果有另一种更好的隐藏BODY直到完成加载的方法，或者这有什么问题，将对您有所帮助。

到目前为止，这是我尝试过的方法：

 function unveil() { var thebod = document.getElementById("testbody"); thebod.STYLE = "display: block;" }

 <HTML> <HEAD> <TITLE>HELLO</TITLE> </HEAD> <BODY ID="testbody" ONLOAD="unveil();" STYLE="display: none;"> <div align="CENTER"> HELLO WORLD! </div> </BODY> </HTML>

Answer 1

window对象的DOMContentLoaded事件可以做到这一点。 但是，不要隐藏主体，而是隐藏一个包装器。 并且，在设置样式时，请确保设置CSS属性的样式，而不是样式对象本身。

 window.addEventListener("DOMContentLoaded", function(){ document.getElementById("wrapper").style.display = "block"; });

 #wrapper { text-align:center; background:#e0e0e0; display:none;}

 <HTML> <HEAD> <TITLE>HELLO</TITLE> </HEAD> <BODY> <div id="wrapper"> HELLO WORLD! <!-- The following is only added to create a delay in the parsing of the document --> <script> for(var i = 0; i < 100000000; ++i){ var x = i / 3.14; } </script> </div> </BODY> </HTML>

Answer 2

您没有正确设置元素“样式”：

您可以执行以下操作：

element.style.display = "block";

要么

element.setAttribute('style', "display: block");

这是一个工作示例：

 function unveil() { var thebod = document.getElementById("testbody"); thebod.style.display = "block"; }

 <HTML> <HEAD> <TITLE>HELLO</TITLE> </HEAD> <BODY ID="testbody" ONLOAD="unveil();" STYLE="display: none;"> <div align="CENTER"> HELLO WORLD! </div> </BODY> </HTML>

Answer 3

您的问题在这里：

thebod.STYLE = "display: block;"

内容应为：

thebod.style.display = 'block';

这是完整的方法（使用简洁的javascript）：

 var body = document.getElementsByTagName('body')[0]; function unveil() { body.style.display = 'block'; } window.addEventListener('load', unveil, false);

 body { display: none; } div { text-align: center; }

 <div>HELLO WORLD!</div>

Answer 4

 <HTML> <HEAD> <TITLE>HELLO</TITLE> </HEAD> <BODY ID="testbody" onload="testbody.style.display = '';" style="display: none;"> <div align="CENTER"> HELLO WORLD! </div> </BODY> </HTML>

隐藏身体，直到完成加载

问题描述

4 个解决方案

解决方案1
3 已采纳 2016-11-23 16:00:09

解决方案2
1 2016-11-23 16:01:56

解决方案3
0 2016-11-23 16:10:17

解决方案4
-1 2016-11-23 16:05:36

隐藏身体，直到完成加载

问题描述

4 个解决方案

解决方案1 3 已采纳 2016-11-23 16:00:09

解决方案2 1 2016-11-23 16:01:56

解决方案3 0 2016-11-23 16:10:17

解决方案4 -1 2016-11-23 16:05:36

解决方案1
3 已采纳 2016-11-23 16:00:09

解决方案2
1 2016-11-23 16:01:56

解决方案3
0 2016-11-23 16:10:17

解决方案4
-1 2016-11-23 16:05:36