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

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

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

＆＃13;

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

＆＃13;

所以我认为你必须通过层次结构并将值乘以toether：

＆＃13;

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

＆＃13;

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

＆＃13;

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

1 个答案: