使用 JavaScript 在延迟后显示元素

作者

使用 JavaScript 在延迟后显示元素

Show an Element after Delay using JavaScript

延迟后显示元素：

  1. 使用setTimeout()方法在延迟后调用函数。
  2. 在函数中，将元素的visibility属性设置为visible。
  3. 将以毫秒为单位的延迟作为第二个参数传递给该setTimeout
    方法。

以下是本文示例的 HTML。

索引.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />

    <style>
      #box {
        visibility: hidden;
        background-color: salmon;
        width: 100px;
        height: 100px;
      }
    </style>
  </head>

  <body>
    <div id="box">Some content here</div>

    <script src="index.js"></script>
  </body>
</html>

这是相关的 JavaScript 代码。

索引.js
const el = document.getElementById('box');

setTimeout(() => {
  el.style.visibility = 'visible';

  // 👇️ if you used `display` to hide element
  // el.style.display = 'block';
}, 2000); // 👈️ delay in milliseconds

我们使用document.getElementById
方法选择了要显示的元素
。

我们使用
setTimeout方法在延迟后调用函数。

我们传递给该方法的第一个参数是我们要调用的函数，第二个参数 –delay以毫秒为单位。

在示例中，我们使用2000ms 作为延迟，等于2秒。

在函数内部，我们将元素的visibility属性设置回visible。

请注意，我们最初在 HTMLhidden的style标记中将属性设置为。

在示例中，我们使用
visibility属性来隐藏和显示元素，但是如果您最初使用 display 属性
来隐藏元素，则可能需要使用
display属性。

当元素的display属性设置为 时none，该元素将从 DOM 中移除并且对布局没有影响。文档呈现为好像该元素不存在一样。

另一方面，当元素的visibility属性设置为 时hidden，它仍会占用页面空间，但该元素是不可见的（未绘制）。它仍然会像往常一样影响您页面上的布局。

通常在延迟显示元素时，您应该使用该visibility
属性来避免页面上的累积布局偏移，这会让用户感到困惑。

下面是一个使用display属性在延迟后显示元素的示例。

索引.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />

    <style>
      #box {
        display: none;
        background-color: salmon;
        width: 100px;
        height: 100px;
      }
    </style>
  </head>

  <body>
    <div>One, two, three</div>
    <div id="box">Some content here</div>
    <div>One, two, three</div>

    <script src="index.js"></script>
  </body>
</html>

这是相关的 JavaScript 代码。

索引.js
const el = document.getElementById('box');

setTimeout(() => {
  el.style.display = 'block';
}, 2000); // 👈️ delay in milliseconds

如果您加载页面，您将看到当元素被隐藏时，它不占用页面空间而其他元素占用它的空间。

当我们将元素的display属性设置为 时block，它会下推下一个元素的内容。

如果我们使用了这个visibility属性，元素仍然会占用页面空间，即使它是隐藏的。

–

发表评论