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

Я думал о циклическом прохождении иерархии элемента ... и сохранении минимального значения

Это хуже чем это. :-) Если у предков непрозрачность, значения объединяются (я думаю, что они умножены вместе), обратите внимание, насколько второй светлее первого:

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