Is It Possible To Query All Elements With In Line Style Property of Background-Image?

Question

I am aware that I could select all the elements on an HTML page, and I can check each element for a particular inline style, such as, background-image. I see this article demonstrating how one can check every node in the DOM.

Without checking every single element and node in the DOM, is there any way that with either jQuery or vanilla JS I can query all elements that have an inline style property of background-image?

I know this code example is a bit naive and of course it does not work but something like this document.querySelectorAll("[style='background-image: url(*)']") if it worked would get me all the elements with a background-image inline style property.

score 1 · Accepted Answer · answered May 02 '20 at 23:36

document.querySelectorAll("[style*='background-image']") is the way to go.

See this answer for more info. Basically *= matches all styles which contain background-image anywhere.

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>

Is It Possible To Query All Elements With In Line Style Property of Background-Image?

1 Answers1