如何获取HTML元素节点的实际CSS属性值？继承样式相关疑问

你遇到的现象其实和getComputedStyle()是否忽略继承值无关，核心是CSS属性的继承规则在起作用。

为什么span的background-color不是橙色？ #

首先要明确：background-color属于非继承属性，它的默认值是transparent（透明）。当你没有给span设置background-color时，它的计算样式就是transparent——父元素的橙色只是透过span的透明背景显示出来，并不是span自身的背景色。

相反，像color这类继承属性，如果子元素没有自己的设置，getComputedStyle()就会返回继承来的值，这也是你的span能拿到自己设置的绿色color的原因。

如何获取span实际可见的背景色？ #

要拿到元素看起来的背景色，我们需要从当前元素开始，向上遍历它的所有祖先节点，找到第一个拥有非透明背景色的元素——这个元素的背景色就是当前元素“看起来的”背景色。

这里给你一个实用的函数实现：

function getVisibleBackgroundColor(element) {
  let currentEl = element;
  // 遍历元素的祖先链，直到找到非透明背景或根节点
  while (currentEl) {
    const computedStyle = window.getComputedStyle(currentEl);
    const bgColor = computedStyle.getPropertyValue("background-color");
    // 排除透明的情况（注意不同浏览器可能返回transparent或rgba(0,0,0,0)）
    if (bgColor !== 'transparent' && bgColor !== 'rgba(0, 0, 0, 0)') {
      return bgColor;
    }
    currentEl = currentEl.parentElement;
  }
  // 如果所有祖先都是透明，返回body的背景色（页面默认背景）
  return window.getComputedStyle(document.body).getPropertyValue("background-color");
}

// 你的示例代码修改后：
const span = document.getElementsByTagName("span")[0];
const visibleBg = getVisibleBackgroundColor(span);
span.innerText = `span visible background-color is ${visibleBg}`;

补充说明 #

• 这个函数会处理大多数常规场景，如果需要考虑更复杂的情况（比如元素的opacity、background-image，或者fixed定位的元素等），可以在函数里增加对应的判断逻辑。
• getComputedStyle()始终返回元素自身的计算样式值，它并没有忽略继承——只是只有继承属性才会从父元素获取值，非继承属性用默认值或自身设置的值。

内容的提问来源于stack exchange，提问作者Krisztián Balla