隱藏身體，直到它完成加載

我創建了這段代碼，這樣我的頁面就會隱藏起來，直到它完成加載。但是我的代碼不能按我的預期工作。我預計這會隱藏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

隱藏身體，直到它完成加載

回答

相關問題