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

Question

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).

Answer 1

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

Answer 2

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.