在前端开发中，有时候需要在页面加载的时候隐藏某些元素。这篇文章将介绍如何使用 JavaScript 在页面加载时隐藏一个 Div 元素。
使用 CSS 隐藏元素
在开始之前，我们先来看一种比较简单的方式，即使用 CSS 来隐藏元素。通过设置元素的样式 display: none; 可以让元素在页面加载时不可见。例如：
---- ---------- --------------- ---------------------
然后在需要显示这个 Div 元素的时候，可以使用 JavaScript 来修改它的样式，例如：
---------------------------------------------- - --------
但是，这种方法有一个缺点，就是在网页加载完成之后才会将元素显示出来。如果需要在网页加载过程中就显示出来，需要使用 JavaScript 实现。
使用 JavaScript 隐藏元素
在 JavaScript 中，可以使用 window.onload 函数来监听页面加载完成的事件。当网页加载完成后，执行相应的代码。例如，下面的代码会在页面加载完成后隐藏一个名为 "myDiv" 的元素：
---- -------------------------
------- -----------------------
------------- - ---------- -
--- ----- - ---------------------------------
------------------- - -------
-
---------这段代码中，首先获取了要隐藏的 Div 元素，然后将其样式设置为 display: none;。由于代码是在页面加载完成后执行的，因此这个 Div 元素在网页加载过程中就会被隐藏起来。
如果需要在一段时间后显示这个元素，可以使用 setTimeout() 函数来设置一个定时器，例如：
------------- - ---------- -
--- ----- - ---------------------------------
------------------- - -------
--------------------- -
------------------- - --------
-- ------ -- - ----
-上面的代码将在页面加载完成后隐藏 "myDiv" 元素，然后设置一个 5 秒的定时器，在定时器触发后显示这个元素。
总结
通过本文的介绍，我们学习了如何使用 JavaScript 在网页加载过程中隐藏一个 Div 元素。这种技术对于某些特定的需求非常有用，例如在页面加载完成前不希望用户看到一些敏感信息等。同时，我们也学习了如何使用 CSS 来隐藏元素，并在需要显示时修改其样式，这是一种比较简单的方法。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/28016