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

Question

我想使用 Javascript 删除给定元素的所有 CSS 背景图像及其所有子元素。这个问题有点像我问的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]);
  }
}

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