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

【问题标题】：JS - Check element rendered opacity valueJS - 检查元素呈现的不透明度值
【发布时间】：2018-04-29 08:34:18
【问题描述】：

假设我有以下 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。

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

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

【问题讨论】：

我认为没有更简单的方法。你想得到你看到的不透明度，而不透明度不属于任何元素。所以，你不能直接得到它。跨度>

标签： javascript css rendering

【解决方案1】：

我想过循环遍历元素的层次结构...并保存最小值

比这更糟糕。 :-) 如果祖先具有不透明度，则将这些值组合起来（我相信它们会相乘），请注意第二个比第一个轻：

<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>

【讨论】：

感谢您的回复，我就是这么想的:(