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 stackoverflow.com/questions/14013131/… - think you need to use getComputedStyle to get css from the stylesheet — Pete
– Pete, Commented Jun 22, 2017 at 9:23

Mark · Accepted Answer · 2017-06-22 09:45:33Z

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, 2017 at 9:45

Mark

2,0433 gold badges22 silver badges43 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

danyo Over a year ago

unfortunately the class "vc_custom_1498122672544" will be unknown as it is generated dynamically.

Mark Over a year ago

@danyo what do you mean by unknown? will the class name keep changing?

danyo Over a year ago

So when a new element is created in the backend, the custom class will be generated on the fly and will therefor be unknown.

middlelady Over a year ago

I think this is the best answer, despite the fact that the class is auto-generated.

hallleron · Accepted Answer · 2017-06-22 09:35:03Z

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, 2017 at 9:35

hallleron

1,9823 gold badges15 silver badges21 bronze badges

3 Comments

danyo Over a year ago

this isnt working for me sorry! can you post a fiddle?

hallleron Over a year ago

Sure: jsfiddle.net/ruisoftware/65bHm - this fiddle is from the above post.

hallleron Over a year ago

If you combine this with a loop and this: developer.mozilla.org/en-US/docs/Web/API/Element/classList - you should be good to go ;-)

Prashant Shirke · Accepted Answer · 2017-06-22 11:19:13Z

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');
} 

});

danyo · Accepted Answer · 2017-06-22 10:22:15Z

-1

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');
    }
});

answered Jun 22, 2017 at 10:22

danyo

5,87620 gold badges66 silver badges120 bronze badges

Collectives™ on Stack Overflow

jQuery detect if css class has background image

4 Answers 4

4 Comments

3 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

4 Comments

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related