Можно ли запросить все элементы со свойством Inline Style для Background-Image?

Question

Мне известно, что я могу выбрать все элементы на странице HTML, и я могу проверить каждый элемент на предмет определенного встроенного стиля, например, background-image. Я вижу эту статью , демонстрирующую, как можно проверить каждый узел в DOM.

Без проверки каждого отдельного элемента и узла в DOM, есть ли способ, с помощью jQuery или vanilla JS я могу запросить все элементы, которые имеют свойство встроенного стиля background-image?

Я знаю, что этот пример кода немного наивен и, конечно, он не работает, но что-то вроде этого document.querySelectorAll("[style='background-image: url(*)']"), если это сработает, получит все элементы со свойством background-image inline style.

Answer 1

document.querySelectorAll("[style*='background-image']") - это путь к go.

См. этот ответ для получения дополнительной информации. В основном *= соответствует всем style s, которые содержат background-image в любом месте.

var imagesWithBackgroundImage = document.querySelectorAll("[style*='background-image']");
console.log(imagesWithBackgroundImage);

.thing {
  width: 120px;
  height: 60px;
  margin: 10px;
}

<div class="thing" style="background-color:red"></div>
<div class="thing" style="background-image:url('http://placekitten.com/120/60')"></div>
<div class="thing" style="background-color:green"></div>
<div class="thing" style="background-image:url('http://placekitten.com/160/60')"></div>
<div class="thing" style="background-color:blue"></div>