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

admin管理员组

文章数量:1405129

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

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

• javascript
• jquery
• css
• jquery-ui

Share Improve this question Follow edited May 23, 2017 at 10:33 CommunityBot 111 silver badge asked Oct 26, 2010 at 14:42 Derek AdairDerek Adair 21.9k3131 gold badges101101 silver badges134134 bronze badges 3

• Perhaps there might be a way to select elements that have a background-image associated with it? – Derek Adair Commented Oct 26, 2010 at 14:53
• I'm confused as to why you're not using the jQuery UI ThemeRoller, or just writing your own CSS for those elements. – Matt Ball Commented Oct 26, 2010 at 15:23
• @Matt Ball - I need to modify a widget to have multiple styles within my application. – Derek Adair Commented Oct 26, 2010 at 15:32

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 2

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

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.

本文标签： jqueryFunction to remove backgroundimages for an element and all its children via javascriptStack Overflow