本文旨在提供一种基于 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 元素，并正确地判断其可见性。
