如何找到所有具有样式背景图像的 div？

Question

有没有jquery或者JS把所有有背景图片的div归档。我需要延迟加载这些 div.

Answer 1

有一个很好的 post 向您展示了如何查找所有图像（图像、背景图像、iframe 中的图像）：https://blog.crimx.com/2017/03/09/get-all-images-in-dom-including-background-en/
因此，如果您试图找到所有具有来自 URL（不是渐变）图像的背景图像的 div，此代码将为您完成：

let divs = document.querySelectorAll("div");

let urlRegex = /url\(\s*?['"]?\s*?(\S+?)\s*?["']?\s*?\)/;

var divsWithBackgroundImage = Array.from(divs).filter((div) => {
    let backgroundImage = getComputedStyle(div).getPropertyValue("background-image");
  
    return (backgroundImage.match(urlRegex));
});

Answer 2

我有另一个解决方案

$('div').filter(function(){
    if(this.style.backgroundImage){
        console.log(this.style.backgroundImage);
    }
});

Answer 3

另一个解决方案

$('div').each(function() {
    if($(this).css('background-image') != 'none'){
        console.log($(this).css('background-image').split(/"/)[1]);
    }
});

如何找到所有具有样式背景图像的 div？

How to find all div which have style background-image?

javascript

jquery

background-image