Как показать блок, если у определенного display:block;?

233

27 октября 2021, 22:20

Как показать блок .i-am-hiding только тогда, если у .i-am-visible активно значение display:block; ?
Благодарю!

let one = document.querySelector('.i-am-visible'); 
let two = document.querySelector('.i-am-hiding'); 
 
if (one.style.display == 'block') { 
two.style.display = 'block'; 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div class="i-am-visible"> 
1111 
</div> 
<div class="i-am-hiding"style="display:none;">2222</div>

Answer 1

В вашем случае нужно получить все стили элемента после применения всех css.
Если бы вы указали стили инлайн в html, тогда можно через свойство style элемента .i-am-visible сделать проверку. Поэтому используем window.getComputedStyle().

Подробнее про window.getComputedStyle() на MDN.

let one = document.querySelector('.i-am-visible'); 
let two = document.querySelector('.i-am-hiding'); 
 
let stylesOfone = window.getComputedStyle(one) 
 
if (stylesOfone.display === 'block') { 
  two.style.display = 'block'; 
}

<div class="i-am-visible">1</div> 
<div class="i-am-hiding" style="display:none;">2</div>

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Как показать блок, если у определенного display:block;?

Как подружить плагин jquery.matchHeight с Webpack?

Поворот объекта в Unity

Уменьшение области со сменой цвета градиента

Update и открытые методы