javascript - JS - 检查元素呈现的不透明度值

Question

假设我有以下 DOM。元素不透明度为 1，但由于它被父 div 包裹，因此它将以不透明度 0.1 呈现:

let el = document.getElementById("element");
console.log(document.defaultView.getComputedStyle(el)["opacity"]);

<div style="opacity:0.1">
  <div id="element">Check Me</div>
</div>

结果还是1。

我想遍历元素的层次结构并检查链中某个祖先是否具有不同的不透明度并保存最小值，但我认为必须有更简单的方法。

如何获得渲染的不透明度值？

Answer 1

I thought of looping through the element's hierarchy...and save the minimum value

比这更糟。 :-) 如果祖先有不透明度，则将值合并(我相信它们相乘)，请注意第二个比第一个更轻:

<div style="opacity:0.3">
  <div>Check Me</div>
</div>
<div style="opacity:0.3">
  <div style="opacity:0.5">
    <div>Check Me</div>
  </div>
</div>

所以我认为你必须遍历层次结构并将值相乘:

let element = document.getElementById("element");
let opacity = 1;
while (element && element.nodeType === 1) {
  const op = getComputedStyle(element).opacity;
  if (op) {
    opacity *= parseFloat(op);
  }
  element = element.parentNode;
}
console.log("Effective opacity: ", opacity);

<div style="opacity:0.1">
  <div>Check Me - for comparison with the one below</div>
</div>
<div style="opacity:0.2">
  <div style="opacity:0.5">
    <div id="element">Check Me</div>
  </div>
</div>