2. 检查类名
接下来，使用 classlist.contains() 方法来检查目标 div 元素是否包含特定的类名。
if (divOverlay.classList.contains('shown')) {
console.log("overlay is shown so hide the button");
targetButton.style.display = 'none'; // 隐藏按钮
} else {
console.log("overlay is hidden so show the button");
targetButton.style.display = 'block'; // 显示按钮 (或 'inline', 'inline-block'，取决于你的需求)
}3. 完整示例
将上述代码整合到一个函数中，并在页面加载完成后执行该函数：
document.addEventListener('DOMContentLoaded', function() {
function toggleButtonVisibility() {
var overlayContainer = document.getElementById("mobile-start-container");
var divOverlay = document.getElementsByClassName("mobile-start-overlay")[0];
var targetButton = document.getElementById("target-button");
if (divOverlay && targetButton) { // 确保元素存在
if (divOverlay.classList.contains('shown')) {
console.log("overlay is shown so hide the button");
targetButton.style.display = 'none';
} else {
console.log("overlay is hidden so show the button");
targetButton.style.display = 'block';
}
} else {
console.warn("One or more elements not found.");
}
}
toggleButtonVisibility(); // 初始执行一次
// 如果 overlay 的状态会动态改变，需要监听相关事件，并在事件处理函数中再次调用 toggleButtonVisibility()
// 例如：
// document.getElementById("some-button").addEventListener("click", toggleButtonVisibility);
});HTML 示例：
注意事项
- 确保元素存在： 在操作 DOM 元素之前，务必确保元素已经加载到页面上。可以使用 document.addEventListener('DOMContentLoaded', function(){ ... }); 来确保在 DOM 加载完成后执行 JavaScript 代码。
- 处理 null 值： 如果 document.getElementById 或 document.getElementsByClassName 没有找到对应的元素，会返回 null。在代码中需要处理这种情况，避免出现错误。
- 动态更新： 如果目标 DIV 元素的类名会动态改变，需要在相关的事件处理函数中再次调用上述代码，以保持 DOM 元素的显示状态与目标 DIV 元素的类名同步。
- CSS display 属性： 使用 style.display 属性来控制元素的显示与隐藏。常用的值包括 none (隐藏)、block (块级元素显示)、inline (行内元素显示) 和 inline-block (行内块级元素显示)。根据实际需求选择合适的值。
- 代码可维护性: 尽量将逻辑封装成函数，提高代码的可读性和可维护性。
总结
通过以上步骤，可以实现根据 DIV 元素的类名来动态控制其他 DOM 元素的显示与隐藏。这种方法在 Web 开发中非常实用，可以根据不同的条件来呈现不同的页面内容，提升用户体验。记住，确保元素存在，处理 null 值，并根据实际情况处理动态更新，才能保证代码的正确性和稳定性。
