如何用JavaScript获取绝对定位透明元素下方的真实背景色

实现方案 #

这里分两种常用场景来实现：

场景1：站点内容区块可控（性能最优，适合导航栏适配场景） #

如果导航栏下方的内容区块都是你预先可配置的（比如你自己开发的站点，所有带背景色的区块都是你写的代码），直接提前预存区块信息即可：

• 页面加载完成后，收集所有带自定义背景色的内容区块的offsetTop、offsetHeight、backgroundColor，存入数组
• 监听页面滚动事件，通过当前window.scrollY匹配当前导航栏下方对应的区块，直接取预存的背景色即可

// 预存区块信息
const sections = Array.from(document.querySelectorAll('.content-section')).map(el => ({
  top: el.offsetTop,
  bottom: el.offsetTop + el.offsetHeight,
  bgColor: window.getComputedStyle(el).backgroundColor
}))
// 滚动监听加节流优化
let timer = null
window.addEventListener('scroll', () => {
  if(timer) return
  timer = setTimeout(() => {
    const scrollY = window.scrollY
    // 匹配当前落在导航栏下方的区块
    const currentSection = sections.find(item => scrollY >= item.top && scrollY < item.bottom)
    const bgColor = currentSection ? currentSection.bgColor : window.getComputedStyle(document.body).backgroundColor
    console.log('当前下方区块背景色：', bgColor)
    timer = null
  }, 100)
})

场景2：通用场景，未知下方元素 #

如果不知道下方元素的结构，用document.elementFromPoint动态获取元素：
核心逻辑是：临时隐藏导航栏的指针事件，取导航栏覆盖范围内的一个点，获取该点对应的下方元素，再拿背景色

function getNavBelowBgColor() {
  const nav = document.querySelector('header')
  // 取导航栏中间的点作为检测点
  const checkX = nav.offsetWidth / 2
  const checkY = nav.offsetHeight / 2
  // 临时禁用导航栏的指针事件，才能拿到下方元素
  nav.style.pointerEvents = 'none'
  // 拿到检测点对应的元素
  const targetEl = document.elementFromPoint(checkX, checkY)
  // 恢复导航栏的指针事件
  nav.style.pointerEvents = 'auto'
  // 递归获取非透明的背景色（处理下层元素也是透明的情况）
  function getRealBg(el) {
    if(!el) return window.getComputedStyle(document.body).backgroundColor
    const bg = window.getComputedStyle(el).backgroundColor
    // 判断是否是透明色
    if(bg === 'rgba(0, 0, 0, 0)' || bg === 'transparent') {
      return getRealBg(el.parentElement)
    }
    return bg
  }
  return getRealBg(targetEl)
}
// 调用示例，滚动时实时获取
window.addEventListener('scroll', () => {
  const bgColor = getNavBelowBgColor()
  console.log('下方背景色：', bgColor)
})

效果参考 #

• 导航栏初始状态：
• 滚动后导航栏状态：

注意事项 #

• 滚动监听建议加节流，避免频繁计算导致页面卡顿
• 如果页面有iframe等特殊元素，elementFromPoint无法跨iframe获取元素，这种情况需要单独处理

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