jQuery detect if css class has background image

Question

I am trying to detect if a certain css class has a background-image applied to it.

I can simply do the following to test if a background-image is present:

if ($('.vc_custom_1498122672544').css('background-image') != 'none') {
  alert('There is a background image');
}

However the above class is generated dynamically, and will not always be known.

The div that has this class attached to it also has a few other classes applied. So i tried the following:

if ($('.vc_row-has-fill').css('background-image') != 'none') {
  alert('There is a background image');
}

This doesnt return anything as the background-image is specifically targeting the class of .vc_custom_1498122672544 and not .vc_row-has-fill.

Is there anything i can do to detect the background-image with the class .vc_row-has-fill?

This may help https://stackoverflow.com/questions/14013131/javascript-get-background-image-url-of-div - think you need to use `getComputedStyle` to get css from the stylesheet — Pete, Jun 22 '17 at 09:23

score 1 · Answer 1 · answered Jun 22 '17 at 09:45

1

actually, you can check whether a class, has another class or not. For example, a div with class .vc_row-has-fill hasClass .vc_custom_1498122672544 or not. if it does, then you could further check whether class .vc_custom_1498122672544 has background-image or not

$('.vc_row-has-fill').each(function(){
    if ($(this).hasClass('vc_custom_1498122672544')){
       if ($('.vc_custom_1498122672544').css('background-image') != 'none') {
          alert('There is a background image');
        }
    }
});

demo : https://jsfiddle.net/9y52ef4c/

im not sure, whether this is what you want to achieve or not. hope will help

answered Jun 22 '17 at 09:45

Mark

2,041
2
18
35

unfortunately the class "vc_custom_1498122672544" will be unknown as it is generated dynamically. – danyo Jun 22 '17 at 09:51
@danyo what do you mean by `unknown`? will the class name keep changing? – Mark Jun 22 '17 at 09:54
So when a new element is created in the backend, the custom class will be generated on the fly and will therefor be unknown. – danyo Jun 22 '17 at 09:57
I think this is the best answer, despite the fact that the class is auto-generated. – middlelady May 11 '18 at 14:47

score 0 · Answer 2 · answered Jun 22 '17 at 09:35

0

Actually you can use the approach from this post: jquery -Get CSS properties values for a not yet applied class

The code from there:

var getCSS = function (prop, fromClass) {

    var $inspector = $("<div>").css('display', 'none').addClass(fromClass);
    $("body").append($inspector); // add to DOM, in order to read the CSS property
    try {
        return $inspector.css(prop);
    } finally {
        $inspector.remove(); // and remove from DOM
    }
};

Basically you can call getCSS('backgroundImage', ***A class to test for a background image***) and use it for a method of elimination.

Does this help you in your situation?

answered Jun 22 '17 at 09:35

hallleron

1,972
3
13
18

this isnt working for me sorry! can you post a fiddle? – danyo Jun 22 '17 at 09:52
Sure: http://jsfiddle.net/ruisoftware/65bHm/ - this fiddle is from the above post. – hallleron Jun 22 '17 at 09:53
If you combine this with a loop and this: https://developer.mozilla.org/en-US/docs/Web/API/Element/classList - you should be good to go ;-) – hallleron Jun 22 '17 at 09:55

Prashant Shirke · Answer 3 · 2017-06-22T11:19:13.267

It should work ideally but if not then you can check if class like vc_custom_1498122672544 always starting with vc_custom_ and it always sets background to the element having class vc_row-has-fill, then you can check whether element has any class which starts with vc_custom like below.

if($(".vc_row-has-fill").is("[class*='vc_custom_']"))
{
   alert('There is a background image');
}

Or using function mentioned in the link posted by @hallleron you can check like below.

$(document).ready(function() {
  function hasBackgroundImageSet(fromClass) {

   var $inspector = $("<div>").css('display', 'none').addClass(fromClass);
   $("body").append($inspector); 
   try {
     return $inspector.css('background-image') != 'none';
   } finally {
   $inspector.remove(); // and remove from DOM
 }
};


var hasBg = $(".vc_row-has-fill").attr("class").split(" ").some(function(cls) {
  return hasBackgroundImageSet(cls);
  //return $("."+cls).css("background-image") != "none";//use this if not use above
});

if(hasBg){
 alert('There is a background image');
} 

});

score -1 · Answer 4 · answered Jun 22 '17 at 10:22

This is the solution i came up with. I know that the custom class is always the 3rd class applied to the div. Quite simple in the end:

$('.vc_row-has-fill').each(function(){
    var classes = $(this).attr('class').split(' ');
    var imgClass = classes[3];
    if ($('.' + imgClass).css('background-image') != 'none') {
      alert('There is a background image');
    }
});

jQuery detect if css class has background image

4 Answers4