根据页面 Overlay 状态动态显示 DOM 元素-html教程-PHP中文网

根据页面 Overlay 状态动态显示 DOM 元素

心靈之曲

发布： 2025-09-13 20:10:01

原创

780人浏览过

根据页面 overlay 状态动态显示 dom 元素

本文旨在提供一种基于 JavaScript，根据页面 Overlay 元素是否显示，动态控制其他 DOM 元素显示与隐藏的实现方法。我们将通过检查特定 CSS 类名是否存在于 Overlay 元素上，来判断其可见性，并根据结果决定是否添加或隐藏目标 DOM 元素。本文提供详细的代码示例和注意事项，帮助开发者理解和应用此技术。

方案详解

核心思路是使用 JavaScript 获取 Overlay 元素，然后检查其 CSS 类列表中是否包含特定的类名（例如 shown）。如果包含，则表示 Overlay 可见，反之则不可见。根据这个判断结果，我们可以决定是否添加或隐藏其他 DOM 元素。

代码实现

以下是一个示例代码，展示了如何根据 Overlay 的 shown 类来动态添加按钮：

千面数字人

千面 Avatar 系列：音频转换让静图随声动起来，动作模仿让动漫复刻真人动作，操作简单，满足多元创意需求。

156

查看详情

document.addEventListener('DOMContentLoaded', function() {
  function addElement() {
    var overlayContainer = document.getElementById("mobile-start-container");
    var divOverlay = document.querySelector(".mobile-start-overlay");

    if (divOverlay && divOverlay.classList.contains('shown')) {
      console.log("Overlay is shown, so don't display the button");
    } else {
      // Create new Button element
      var newButton = document.createElement("button");
      // add class to the new Button
      newButton.className = "question-btn";
      // add SVG tag inside Button
      var newSvg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
      // add class to svg tag
      newSvg.className = "svg-icon";
      newSvg.setAttribute("viewBox", "0 0 10 10"); // 设置 viewBox 属性
      // fill svg element with my shape
      var svgContent = document.createElementNS("http://www.w3.org/2000/svg", 'path');
      svgContent.setAttribute("d", "M 0 0 L 10 10");
      svgContent.setAttribute("stroke", "#fff");
      svgContent.setAttribute("stroke-width", "1");
      newSvg.appendChild(svgContent);
      // add svg node to created button
      newButton.appendChild(newSvg);
      // add new button somewhere else in DOM
      var currentDiv = document.getElementById('nav-controls');
      if (currentDiv) {
        document.body.insertBefore(newButton, currentDiv);
      } else {
        document.body.appendChild(newButton); // 如果 nav-controls 不存在，则添加到 body 底部
      }

      console.log(newButton);
    }
  }

  addElement();
});

登录后复制

代码解释：

document.addEventListener('DOMContentLoaded', function() { ... });: 确保在 DOM 加载完成后执行 JavaScript 代码。
document.querySelector(".mobile-start-overlay"): 使用 querySelector 代替 getElementsByClassName，更方便地选择元素，并且可以处理更复杂的 CSS 选择器。注意返回的是第一个匹配的元素，如果需要处理多个元素，需要使用 querySelectorAll。
if (divOverlay && divOverlay.classList.contains('shown')): 首先确保 divOverlay 存在，然后再检查其 classList 是否包含 shown。这避免了 divOverlay 为 null 时访问 classList 属性导致错误。
SVG 创建: 使用 document.createElementNS 创建 SVG 元素及其子元素，并设置必要的属性，例如 viewBox，以及使用 setAttribute设置 stroke 和 stroke-width，确保 SVG 正确显示。
DOM 插入位置: 首先检查 nav-controls 元素是否存在，如果存在，则将新按钮插入到该元素之前；否则，将新按钮添加到 body 的末尾。
事件监听器: 使用 DOMContentLoaded 事件监听器，确保在 DOM 完全加载后执行 JavaScript 代码，避免因 DOM 元素尚未加载而导致的问题。

注意事项

确保 DOM 元素存在： 在 JavaScript 代码中，需要确保要操作的 DOM 元素已经加载到页面上。可以使用 document.addEventListener('DOMContentLoaded', function() { ... }); 来确保在 DOM 加载完成后执行 JavaScript 代码。
CSS 类名准确性： 确保在 JavaScript 代码中使用的 CSS 类名与 HTML 结构中的类名完全一致。
SVG 属性设置： 创建 SVG 元素时，需要设置 viewBox 属性，并使用 setAttribute 设置 stroke 和 stroke-width，以确保 SVG 正确显示。
错误处理： 增加错误处理机制，例如在获取 DOM 元素失败时，给出相应的提示信息，避免程序崩溃。