CODEWITHSUNDEEP
javascriptjquerycssjquery-ui
Derek Adair
Derek Adair

Reputation: 21935

Function to remove background-images for an element and all its children via javascript

I would like to remove all CSS background images for a given element and all of its children with Javascript. This question is sort-of a spin off on another question I asked. The end goal is the same, to skin jQuery UI widgets.

I am currently using jquery/jquery-ui if any of would use these to solve the problem.

Any ideas?

bonus:

It would be wonderful to be able to remove background images for different jquery-ui states, BUT i've all but resolved myself to overriding these bg images via CSS.

EX: ui-state-hover, ui-state-active both have background images associated with them.

or

Please let me know if you think any kind of programmatic style overrides should not be done this way (please supply your reasoning).

Upvotes: 1

Views: 10963

Answers (2)

Thomas F.
Thomas F.

Reputation: 134

function removeChildBackgrounds(parent) {
  parent.style.backgroundImage = "none";
  var childNodes = parent.childNodes;
  for(var i=0;i<childNodes.length;i++) {
    removeChildBackgrounds(childNodes[i]);
  }
}

This would remove all backgrounds recursively, starting with the parent node.

Upvotes: 1

Harmen
Harmen

Reputation: 22436

You could just use an easy jQuery selector (might be slow though)

// You might now need the !important, but it overrules other !important's
$( '*', givenElement ).css( 'backgroundImage', '0 !important' );

But it's better to just add a certain class to your parent element, and then use normal CSS to style the children. For example:

// Javascript
$( givenElement ).addClass( 'stateX' );

// CSS, basic example to give you an idea
.stateX div, .stateX span {
    background-image: 0;
}

.stateY div, .stateY span {
    background-image: url( someimage.png );
}

Upvotes: 2

Related Questions