Check for Background in CSS

Question

I have a number of CSS attributes and Classes which get applied based on where the element appears in the HTML.

However some elements do not equal any of these values so i want to be able to check which elements in a DIV do not have a background set via CSS then apply a background.

Something like:

$('.divclass:has('background')').addClass('IneedaBG.gif');

Or

$('.divclass:has(not:class1,class2,class2)').addClass('IneedaBG.gif');

Answer 1

Try filtering out elements that don't have a background set (either in stylesheets or inline, jquery catches both), then add your class to just those elements:

$('.divclass')
    .filter(function() { return $(this).css('background-image') })
    .addClass('IneedaBG')

Answer 2

Try this:

$('.divclass').each(function()
{
    if($(this).css('background') != '') $(this).addClass('Bgclass');
});

Your code

$('.divclass:has('background')').addClass('IneedaBG.gif');

Will not work: just look at the color highlighting. The inner quotes need to be "" or `` . Also :has is for elements containg elements: a:has(b) means "Select all a elements containing at least one b element"

Answer 3

I'm not sure class names can have a dot (IneedaBG.gif). Imagine if you tried to select this with a selector:

$(".IneedaBG.gif")

I'm pretty sure this wouldn't work. Is it possible you want a CSS class with the image defined in the properties?

Also, you can speed up your selector performance a little, as direct reference to the .divclass class will scan the whole DOM:

$("div.divclass:has('background')").addClass("IneedaBG");

Try also using " for the selectors, instead of having multiple '

Can you have an ID for the DIV? That would be even better!