如何获取DOM元素的实际渲染透明度（opacity）值？

Great question! This is a classic quirk with CSS opacity: while the property affects child elements visually, it's not "inherited" in the traditional CSS sense. That's why getComputedStyle(el).opacity only returns the element's own opacity value (1 in your example), not the cumulative effect from its transparent ancestors.

To get the actual rendered opacity, you need to traverse the element's entire ancestor chain, multiply each ancestor's computed opacity value together with the target element's own value. Here's a practical implementation:

Solution Code #

function getActualRenderedOpacity(element) {
  let cumulativeOpacity = 1;
  let currentNode = element;

  // Traverse up through all ancestors until we reach the top of the DOM
  while (currentNode) {
    const computedStyle = window.getComputedStyle(currentNode);
    const nodeOpacity = parseFloat(computedStyle.opacity);

    // Only multiply if we get a valid number (avoids edge cases)
    if (!isNaN(nodeOpacity)) {
      cumulativeOpacity *= nodeOpacity;
    }

    // Move up to the parent element
    currentNode = currentNode.parentElement;
  }

  return cumulativeOpacity;
}

// Usage with your example DOM
const el = document.getElementById("element");
console.log(getActualRenderedOpacity(el)); // Logs 0.1, matching the visual result

Key Details to Note #

• Cumulative Multiplication: Each ancestor's opacity acts as a multiplier on the element's effective transparency. For example, if a parent has opacity: 0.5 and a grandparent has opacity: 0.5, the element's actual opacity becomes 1 * 0.5 * 0.5 = 0.25.
• Handling Edge Cases: The parseFloat ensures we convert the string value from getComputedStyle to a number, and isNaN checks prevent invalid values from breaking the calculation.
• Full DOM Traversal: The loop runs until currentNode is null (which happens when we go past the <html> element), ensuring we capture every possible ancestor that could affect opacity.

Additional Considerations #

• This method only accounts for CSS opacity properties. If transparency is applied via other means (like rgba() background colors, transform: opacity(), or filter: opacity()), those won't be included in this calculation.
• If an ancestor is set to display: none or visibility: hidden, the element won't be rendered at all, but this function will still return the cumulative opacity value—you might want to add checks for those properties if needed for your use case.

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