Javascript 从样式中删除背景图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8032540/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
remove background-image from style
提问by Pinkie
How can i remove background-image from element style. I don't want to set it to none or 0. I want to remove it completely. it's conflicting with moz-linear-gradientwhich is defined in another class.
如何从元素样式中删除背景图像。我不想将它设置为 none 或 0。我想完全删除它。它与moz-linear-gradient另一个类中定义的哪个相冲突。
<div style="background-image:url(http://domain.com/1.jpg); width:100px" class="mozgradient"></div>
回答by nnnnnn
Have you tried:
你有没有尝试过：
$(".mozgradient").css("background", "");
Setting the background to an empty string should remove the inline style such that class and other stylesheet settings take effect, but it shouldn't affect other styles that were set inline like width. (In this case removing it from all elements with the mozgradientclass prevents the conflict you are talking about.)
将背景设置为空字符串应该删除内联样式，以便类和其他样式表设置生效，但它不应该影响其他内联设置的样式，例如width. （在这种情况下，从mozgradient该类的所有元素中删除它可以防止您正在谈论的冲突。）
From the jQuery .css() doco:
Setting the value of a style property to an empty string — e.g. $('#mydiv').css('color', '') — removes that property from an element if it has already been directly applied, whether in the HTML style attribute, through jQuery's .css() method, or through direct DOM manipulation of the style property.
将样式属性的值设置为空字符串 - 例如 $('#mydiv').css('color', '') - 如果该属性已被直接应用，则从元素中删除该属性，无论是在 HTML 样式中属性，通过 jQuery 的 .css() 方法，或通过样式属性的直接 DOM 操作。
回答by DA.
I'm not entirely sure what you are after, but I'm making an assumption that you have the inline style on the div tag, and via CSS, you're trying to over-ride that.
我不完全确定你在追求什么，但我假设你在 div 标签上有内联样式，并且通过 CSS，你试图超越它。
The only option here is the !importantflag in your css file. So in your css file you'd have this:
这里唯一的选择是!importantcss 文件中的标志。所以在你的 css 文件中你会有这个：
.mozgradient {background-image(whatever) !important}
UPDATE:
更新：
I see now that you are trying to do it via jQuery. Try this:
我现在看到您正在尝试通过 jQuery 来做到这一点。尝试这个：
var divWidth = $yourDiv.css('width');
$yourDiv.removeAttr('style').css('width', divWidth);
Though note that that would only work provided 'width' is the only css inline style you want to preserve. If there could be any inline style in there, you'd have to resort to either the CSS option above of using !important or using jQuery, grab the entire style attribute and get dirty with REGEX to parse out any background-image styles specifically.
尽管请注意，只有在“宽度”是您要保留的唯一 css 内联样式的情况下，这才有效。如果那里可能有任何内联样式，则必须求助于上面使用 !important 或使用 jQuery 的 CSS 选项，获取整个样式属性并使用 REGEX 弄脏以专门解析任何背景图像样式。
UPDATE II:
更新二：
OK, based on the comments, this is getting tricky. The challenge is that there may be any number of inline styles being applied via the styleattribute (ugh! I feel your pain!) and we only want to clear out the background-imageso that we can let the external CSS handle it.
好的，根据评论，这变得很棘手。挑战在于可能通过style属性应用了任意数量的内联样式（啊！我觉得你很痛苦！）我们只想清除background-image以便我们可以让外部 CSS 处理它。
Here's another option:
这是另一种选择：
// create a div and attach the class to it
$testDiv = $('<div>').class('mozgradient').css('display','none');
// stick it in the DOM
$('body').append($testDiv);
// now cache any background image information
var bgndImg = $testDiv.css('background-image');
// get rid of the test div you want now that we have the info we need
$testDiv.destroy();
// now that we have the background-image information
// from the external CSS file, we can re-apply it
// to any other element on the page with that class
// name to over-ride the inline style
$('.mozgradient').css('background-image',bgndImg);
Clunky, but I think it'd work.
笨重，但我认为它会起作用。
回答by Arun Kumar
If you want to dynamically remove background image, then use $("selector").css();function in jquery or inn CSS apply background:noneSee more at: http://jsfiddle.net/creativegala/um3Ez/
如果你想动态移除背景图片，那么$("selector").css();在 jquery 或 inn CSS apply 中使用函数background:none查看更多信息：http: //jsfiddle.net/creativegala/um3Ez/
回答by Charles Jaimet
The best way to handle this is at the HTML level or in whatever server-side script you use to create the HTML. Just have it not print the style attribute. Once it's there, it takes highest priority in the CSS cascade so it over-rides anything else in class or id definitions.
处理此问题的最佳方法是在 HTML 级别或在您用于创建 HTML 的任何服务器端脚本中。只是让它不打印样式属性。一旦它在那里，它在 CSS 级联中获得最高优先级，因此它会覆盖类或 id 定义中的任何其他内容。
The second best option is to over-ride it after load using JavaScript. You can't remove it but you can replace it with whatever the class is trying to pass as long as you can add an id tag to it..
第二个最佳选择是在使用 JavaScript 加载后覆盖它。你不能删除它，但你可以用类试图传递的任何东西替换它，只要你可以向它添加一个 id 标签..
.mozgradient { background-image:url(http://domain.com/2.jpg); } /* will not work */
#fixedelement { background-image:url(http://domain.com/2.jpg); } /* will not work */
<div style="background-image:url(http://domain.com/1.jpg); width:100px" class="mozgradient" id="fixedelement"></div>
<script type="text/javascript">
fixedelement.style.backgroundImage = 'url(http://domain.com/2.jpg)'; /* will work */
</script>
回答by iglvzx
A workaround would be to 'reset' the property. In this case, I think the following should do the trick:
一种解决方法是“重置”该属性。在这种情况下，我认为以下内容应该可以解决问题：
div[class="mozgradient"] { background-image: none !important; }
div[class="mozgradient"] { background-image: none !important; }
回答by COLD TOLD
$(div you use).removeAttr('style')
this should remove the style
这应该删除样式
$(div you use).attr('style', 'width: 100px');
and then should add the specified style with just height
然后应该只添加高度的指定样式
not sure if it what you want
不确定它是否是你想要的
