Блог

Возьмем следующий пример:

 const nested = document.querySelector("#nested")
const opacity = getComputedStyle(nested).opacity
console.log(opacity) 

 #parent{
  width: 100px;
  height: 100px;
  background: red;
  opacity: .2;
}

#nested {
  background: green;
} 

 <div id="parent">
  <div>
    <div>
      <div id="nested">nested</div>
    </div>
  </div>
</div> 

Как вы можете видеть #nested , он прозрачен, потому #parent что имеет opacity значение .2 , которое ожидается.

Вопрос

Как я могу проверить, является ли #nested он прозрачным (= непрозрачность меньше 1) из-за какого-то родительского элемента? getComputedStyle к сожалению, не работает, как показано в примере выше.

(В моем случае родительский элемент, который объявляет opacity значение, не может быть легко доступен с помощью селекторов, потому что он не уникален. Таким образом, я был бы признателен за решение без прямого доступа к родительскому элементу по идентификатору (или аналогичному), а скорее просто работая с вложенным элементом.)

Это решение позволяет вам найти ближайшего родителя, правило непрозрачности которого меньше 1. Это означает, что именно этот найденный родитель повлияет на прозрачность дочернего элемента.

Поиск элемента начинается с дочернего элемента, цикла for() , поэтому это не вызовет никакой нагрузки.

 let nested = document.querySelector("#nested")

function findOpacityElement(el) {
  for (; el amp;amp; el !== document; el = el.parentNode) {
    if (getComputedStyle(el).opacity < 1) {
      console.log(el);
      console.log(getComputedStyle(el).opacity);
    } else {}
  }
};

findOpacityElement(nested); 

 #parent{
  width: 100px;
  height: 100px;
  background: red;
  opacity: .2;
}

#nested {
  background: green;
} 

 <div id="parent">
  <div>
    <div>
      <div id="nested">nested</div>
    </div>
  </div>
</div>