用于通过javascript删除元素及其所有子元素的背景图像的功能

Question

我想删除给定元素的所有CSS背景图片，并使用Javascript删除其子项的所有。我问这个问题是another question的问题。对于皮肤jQuery UI小部件，最终目标是相同的。

我目前正在使用jquery / jquery-ui，如果有人会使用这些来解决问题。

有什么想法吗？

奖金：

能够为不同的jquery-ui状态删除背景图像会很棒，但我只是解决了自己通过CSS覆盖这些bg图像。

EX： ui-state-hover，ui-state-active都有与之关联的背景图片。

或

如果您认为任何类型的程序化样式覆盖不应该以这种方式完成，请告诉我（请提供您的推理）。

Answer 1

你可以使用一个简单的jQuery选择器（虽然可能很慢）

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

但最好只在父元素中添加某个类，然后使用普通的CSS来设置子元素的样式。例如：

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

这将从父节点开始递归删除所有背景。