本文旨在提供一种基于 JavaScript，根据页面 Overlay 元素是否显示，动态控制其他 DOM 元素显示与隐藏的实现方法。我们将通过检查特定 CSS 类名是否存在于 Overlay 元素上，来判断其可见性，并根据结果决定是否添加或隐藏目标 DOM 元素。本文提供详细的代码示例和注意事项，帮助开发者理解和应用此技术。
方案详解
核心思路是使用 JavaScript 获取 Overlay 元素，然后检查其 CSS 类列表中是否包含特定的类名（例如 shown）。如果包含，则表示 Overlay 可见，反之则不可见。根据这个判断结果，我们可以决定是否添加或隐藏其他 DOM 元素。
代码实现
以下是一个示例代码，展示了如何根据 Overlay 的 shown 类来动态添加按钮：
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 元素失败时，给出相应的提示信息，避免程序崩溃。
总结
通过本文提供的方案，您可以根据页面 Overlay 的状态，动态地控制其他 DOM 元素的显示与隐藏。这种方法可以用于实现各种交互效果，例如在 Overlay 显示时隐藏某些按钮，或者在 Overlay 隐藏时显示其他内容。 关键在于准确地获取 Overlay 元素，并正确地判断其可见性。
css javascript java html node svg app ssl ai JavaScript css html NULL if function 事件 dom 选择器