隐藏身体，直到它完成加载

我创建了这段代码，这样我的页面就会隐藏起来，直到它完成加载。但是我的代码不能按我的预期工作。我预计这会隐藏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>

来源

2016-11-23 cascading-style

尝试使用一个类，加载后，删除类。 –

感谢您的帮助！这里是我正在测试的页面的链接：https：//www.batalabs.tk/attempt –

的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>

来源

2016-11-23 16:00:09

你没有设置元素 '风格' 正确：

你可以这样做：

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>

来源

2016-11-23 16:01:56 KevBot

-1

<HTML> 
 

 
<HEAD> 
 
    <TITLE>HELLO</TITLE> 
 
</HEAD> 
 

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

 
</HTML>

来源

2016-11-23 16:05:36

你的问题就在这里：

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>

来源

2016-11-23 16:10:17 Rounin

隐藏身体，直到它完成加载

回答

相关问题