List of All Background Images in Dom

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

I got another solution

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

Javascript add multiple background images using HTML DOM or Jquery

You can use the background-image CSS property, which can be given multiple images. The first background specified will be on the top and the last one will be on the bottom.

document.querySelector("button").addEventListener("click", function(e){
  document.querySelector("table").style.backgroundImage += ",url(https://www.w3schools.com/css/paper.gif)";
}, {once: true});

<table style="height: 100px; width: 100px; border: 1px solid black; background-image: url(https://www.w3schools.com/css/img_flwr.gif);">
</table>
<button>
Add Image
</button>

Quickly select all elements with css background image

If there are any tags that you know will not have a background image, you can improve the selection be excluding those with the not-selector^(docs).

$('*:not(span,p)')

Aside from that, you could try using a more native API approach in the filter.

$('*').filter(function() {
    if (this.currentStyle) 
              return this.currentStyle['backgroundImage'] !== 'none';
    else if (window.getComputedStyle)
              return document.defaultView.getComputedStyle(this,null)
                             .getPropertyValue('background-image') !== 'none';
}).addClass('bg_found');

Example: http://jsfiddle.net/q63eU/

The code in the filter is based on the getStyle code from: http://www.quirksmode.org/dom/getstyles.html

---

Posting a for statement version to avoid the function calls in .filter().

var tags = document.getElementsByTagName('*'),
    el;

for (var i = 0, len = tags.length; i < len; i++) {
    el = tags[i];
    if (el.currentStyle) {
        if( el.currentStyle['backgroundImage'] !== 'none' ) 
            el.className += ' bg_found';
    }
    else if (window.getComputedStyle) {
        if( document.defaultView.getComputedStyle(el, null).getPropertyValue('background-image') !== 'none' ) 
            el.className += ' bg_found';
    }
}

How to get the element background image in html using javascript

The getStyle() function below was taken from http://www.quirksmode.org/dom/getstyles.html#link7 (and slightly modified).

Of course you need to make sure the DOM is ready. An easy way to do that is to place the script toward the bottom of the page, just inside the closing </body> tag.

<script type="text/javascript">
    function getStyle(x, styleProp) {
        if (x.currentStyle) var y = x.currentStyle[styleProp];
        else if (window.getComputedStyle) var y = document.defaultView.getComputedStyle(x, null).getPropertyValue(styleProp);
        return y;
    }

       // Get all elements on the page
    var elements = document.getElementsByTagName('*');

       // store the results
    var results = [],
        i = 0,
        bgIm;

       // iterate over the elements
    for (;elements[i];i++) {
             // get the background-image style property
        bgIm = getStyle(elements[i], 'background-image');

             // if one was found, push it into the array
        if (bgIm && bgIm !== 'none') {
            results.push(bgIm);
        }
    }

       // view the console to see the result
    console.log(results);
</script>

It sounded like you want the path to the images themselves.

If you wanted the actual elements, change:

results.push(bgIm);

to:

results.push(elements[i]);

---

Related Topics