Найти img со стилем display.block

Question

Знаю что вопрос лёгкий, но есть 2 img, На одной дисплей none а на другой block

image.addEventListener('click', changeImage)

button.addEventListener('click', changeStyle)

<img id="imagE" class="image" style="display: none; cursor: pointer" src="assets/9X_OQf4g.jpg"> 
<img id="image" class="image" style="display: block; cursor: pointer" src="assets/11.jpg">

При клике на функцию стили картинки изменяются. А при клике на фото меняется сама картинка. Надо определить img со стилем display: 'block', чтобы при клике на кнопку менялась именно активная фотка .

Как это сделать?

Answer 1

Достаточно обратиться к свойству style элемента и сравнить значение ключа display

// Получаем элемент
const im = document.getElementById('image');
console.log(im) // Сам элемент
console.log(im.style.display) // Значение свойства style.display
// По событию клика
im.addEventListener('click', (e) => {
  if (e.target.style.display === 'block') {
    console.log('Нашли display: block')
  }
  console.log(e.target.style.display)
});

// Если выбрать из нескольких элементов
const images = document.getElementsByClassName('image');
let active;
for(let img of images) {
  if (img.style.display === 'none') {
    active = img.id;
    break;
  }
}
console.log(active)

<img id="imagE" class="image" style="display: none; cursor: pointer" src="assets/9X_OQf4g.jpg"> 
<img id="image" class="image" style="display: block; cursor: pointer" src="assets/11.jpg">

БЛОГ НА HUSL

Найти img со стилем display.block

Ответы (1 шт):