JavaScript实现元素显隐联动：弹窗显示时隐藏箭头的问题排查

核心问题分析 #

你的代码存在三个关键问题：

• document.getElementsByClassName() 返回的是HTMLCollection类数组对象，不是单个DOM元素，无法直接访问.style属性
• 仅通过.style.display只能读取元素的内联样式，如果弹窗的display:block是通过外部CSS/内部样式表设置的，会读取不到实际状态
• 缺少函数pop()的触发时机，比如弹窗显示时的事件绑定，代码逻辑无法被执行

修复后的代码 #

// 获取目标元素（取第一个匹配项，若有多个需遍历处理）
const spuBg = document.querySelector(".spu-bg");
const opnArrow = document.querySelector(".opn");

function checkPopState() {
  // 获取元素实际生效的样式
  const computedStyle = window.getComputedStyle(spuBg);
  if (computedStyle.display === "block") {
    opnArrow.style.display = "none";
  } else {
    // 可选：弹窗隐藏时恢复箭头显示
    opnArrow.style.display = "block";
  }
}

// 触发方式1：绑定弹窗显示按钮的点击事件
document.querySelector(".show-spu-btn").addEventListener("click", checkPopState);

// 触发方式2：监听弹窗样式变化（自动联动，兼容现代浏览器）
const observer = new MutationObserver(checkPopState);
observer.observe(spuBg, { attributes: true, attributeFilter: ["style"] });

关键优化说明 #

• 用document.querySelector()直接获取单个匹配元素，比getElementsByClassName()更简洁易用
• 通过window.getComputedStyle()获取元素实际生效的样式，不受样式定义位置限制
• 提供两种触发逻辑：手动点击事件检测、自动监听样式变化，适配不同场景需求

内容的提问来源于stack exchange，提问作者Miner