是否可以查询具有背景图像的线条样式属性的所有元素？

Question

我知道我可以 select 页面上的所有元素 HTML ，我可以检查每个元素的特定内联样式，例如background-image 。 我看到这篇文章演示了如何检查 DOM 中的每个节点。

在不检查 DOM 中的每个元素和节点的情况下，有什么方法可以使用 jQuery 或 vanilla JS 查询所有具有内联样式属性的元素background-image ？

我知道这个代码示例有点幼稚，当然它不起作用，但是如果它起作用的话，像这个document.querySelectorAll("[style='background-image: url(*)']")这样的东西会让我得到所有的元素具有background-image内联样式属性。

Answer 1

document.querySelectorAll("[style*='background-image']")是通往 go 的方式。

有关更多信息，请参阅此答案。 基本上*=匹配所有在任何地方包含background-image的style 。

 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>