是否可以覆盖/删除背景：none!important with jQuery？

Is it possible to override / remove background: none!important with jQuery?

提问by Mere Development

I have an element which should have a background image, but it's been given the following style in a stylesheet that I'm not able to access/modify:

我有一个应该有背景图像的元素，但它在样式表中被赋予了以下样式，我无法访问/修改：

#an-element li {
  background: none !important;
}

Is it possible to undo that style with jQuery? I've tried to add background: inhert!importantwith jQuery in two ways: by adding an inline style, and by removing an applied style. Neither work.

是否可以使用 jQuery 撤消该样式？我尝试通过background: inhert!important两种方式使用 jQuery添加：添加内联样式和删除应用的样式。都不工作。

Here is a Fiddle illustrating the problem: http://jsfiddle.net/9bJzk/1/

这是一个说明问题的小提琴：http: //jsfiddle.net/9bJzk/1/

UPDATE: I had the wrong fiddle link, please look again.

更新：我有错误的小提琴链接，请再看一次。

UPDATE 2: I cannot edit the stylesheet. I've changed the title to be more clear now. I have to do this with jQuery as I can't control the loading order of the CSS files, but can run jQuery onload.

更新 2：我无法编辑样式表。我把标题改得更清楚了。我必须使用 jQuery 执行此操作，因为我无法控制 CSS 文件的加载顺序，但可以运行 jQuery onload。

UPDATE 3: I can't explicitly set the 'kitten' pic (see the fiddle) with a more accurate CSS selector like selector like #an-element .image-list lias some are suggesting as those images are being written out on the fly. The jsFiddle was just an example. To make it clearer still: Can the effects of the background: nonebe undone with PURE jQuery and NOT editing of any stylesheets. Thanks for sticking with this!

更新 3：我无法使用更准确的 CSS 选择器（如选择器）明确设置“小猫”图片（见小提琴），就像#an-element .image-list li某些人建议的那样，因为这些图像正在即时写出。jsFiddle 只是一个例子。更清楚一点：可以background: none使用 PURE jQuery 撤消效果，而不是编辑任何样式表。感谢您坚持这一点！

回答by Virus721

div { background: none !important }
div { background: red; }

Is transparent.

是透明的。

div { background: none !important }
div { background: red !important; }

Is red.

是红色的。

An !important can override another !important.

一个 !important 可以覆盖另一个 !important。

If you can't edit the CSS file you can still add another one, or a style tag in the head tag.

如果您无法编辑 CSS 文件，您仍然可以添加另一个文件，或者在 head 标签中添加一个样式标签。

回答by Dmitry

Several problems arise in this question.

这个问题出现了几个问题。

Problem #1 - css Specificity(how to override important rule).

问题 #1 - css特异性（如何覆盖重要规则）。

According to specification - to override this selector your selector should be 'stronger' which mean it should be!important and have at least 1 id, 1 class and something else - according to you creating this selector is impossible(as you can't alter page content). So the only possible option is to put something into element style which (could be done with js). Note: style rule should also have !important to override.

根据规范 - 要覆盖这个选择器，你的选择器应该是“更强”的，这意味着它应该是！重要的并且至少有 1 个 id、1 个类和其他东西 - 根据你创建这个选择器是不可能的（因为你不能改变页面内容）。所以唯一可能的选择是将一些东西放入元素样式中（可以用 js 完成）。注意：样式规则也应该有 !important 来覆盖。

Problem #2 - background is not a single property - it is a set of properties (see specification)

问题#2 - 背景不是一个单一的属性 - 它是一组属性（见规范）

So you really need to know what are exact names of properties you want to change (in your case it would be background-image)

因此，您确实需要知道要更改的属性的确切名称是什么（在您的情况下是背景图像）

Problem #3 - How to remove rule already applied (to get previous value)?

问题 #3 - 如何删除已应用的规则（以获取以前的值）？

Unfortunately css have no mechanism to dismiss rule which qualify for an element - only to override with "stronger" rule. So you won't be able to solve this task with just setting value to something like 'inherit' or 'default' cause value you want to see is neither inherit from parent nor default. To solve this problem you have couple of options.

不幸的是，css 没有机制来消除符合元素条件的规则 - 只能用“更强”的规则覆盖。因此，您将无法仅通过将值设置为“继承”或“默认”之类的值来解决此任务，因为您希望看到的值既不是从父级继承也不是默认值。要解决此问题，您有几种选择。

1) You may already know what is the value you want to apply. For example you can find out this value based on selector used. So in this case you may know that for selector ".image-list li" you need background-image: url("http://placekitten.com/150/50"). If so - just you this script:

1) 您可能已经知道要应用的值是什么。例如，您可以根据使用的选择器找出该值。因此，在这种情况下，您可能知道对于选择器“.image-list li”，您需要 background-image: url(" http://placekitten.com/150/50")。如果是这样 - 只有你这个脚本：

jQuery(".image-list li").attr('style', 'background-image: url("http://placekitten.com/150/50") !important; ');

2) If you don't know the value then you can try to alter page content in such a way, that rule you want to dismiss is no longer qualify for element, whereas rule you want to be shown - still qualify. In this case you may temporary remove id from container element. Here is the code:

2）如果您不知道该值，那么您可以尝试以这种方式更改页面内容，您要取消的规则不再符合元素的条件，而您要显示的规则仍然符合条件。在这种情况下，您可以临时从容器元素中删除 id。这是代码：

jQuery("#an-element").attr('id', '');
var backgroundImage = jQuery(".image-list li").css('background-image');
jQuery("#an-element").attr('id', 'an-element');
jQuery(".image-list li").attr('style', 'background-image: ' + backgroundImage + ' !important; ');

Here is link to fiddle http://jsfiddle.net/o3jn9mzo/

这是小提琴的链接http://jsfiddle.net/o3jn9mzo/

3) As third solution - you may generate element which will qualify for desired selection to find out property value - something like this:

3）作为第三种解决方案 - 您可以生成符合所需选择的元素以找出属性值 - 如下所示：

var backgroundImage = jQuery("<div class='image-list'><li></li></div>").find('li').css('background-image');
jQuery(".image-list li").attr('style', 'background-image: ' + backgroundImage + ' !important; ');

P.S.: Sorry for really late response.

PS：抱歉回复晚了。

回答by artSx

Why does not it work? Because the background CSS with background:none!importanthas one #ID

为什么它不起作用？因为背景 CSS withbackground:none!important有一个#ID

A CSS selector file that contains an #idwill always have a higher value than one .class

包含 的 CSS 选择器文件#id将始终具有大于 1 的值.class

If you want to work, you need add #idon your .image-list lilike this:

如果你想工作，你需要添加#id你的.image-list li是这样的：

#an-element .image-list li {
    display: inline-block;
    background-image: url("http://placekitten.com/150/50")!important;
    padding: 1em;
    border: 1px solid blue;
}

result here

结果在这里

回答by iConnor

Yes it is possible depending on what css you have, you simply just declare the same thing with a different background like this

是的，这可能取决于您拥有的 css，您只需像这样声明具有不同背景的相同内容

ul li {
    background: none !important;
}

ul li{
    background: blue !important;
}

But you have to make sure the declaration comes after the first one seeing as it is cascading.

但是你必须确保声明在第一个看到之后出现，因为它是级联的。

Demo

演示

You can also create a style tag in jQuery like this

你也可以像这样在 jQuery 中创建一个样式标签

$('head').append('<style> #an-element li { background: inherit !important;} </style>');

Demo

演示

You cannot see any changes because it's not inheriting any background but it is overwriting the background: none;

您看不到任何更改，因为它没有继承任何背景，而是覆盖了 background: none;

回答by They call me Trinity

Any !importantcan be overridden by another !important, the normal CSS precedence rulesstill apply.

任何!important都可以被另一个!important覆盖，正常的CSS 优先规则仍然适用。

Example:

例子：

#an-element{
    background: #F00 !important;
}
#an-element{
    background: #0F0 !important; //Makes #an-element green
}

Then you could add a styleattribute (using JavaScript/jQuery) to override the CSS

然后你可以添加一个样式属性（使用 JavaScript/jQuery）来覆盖 CSS

$(function () {  
    $("#an-element").attr('style', 'background: #00F !important;');
    //Makes #an-element blue
});

See the result here

在此处查看结果

回答by Ry-

With a <script>right after the <style>that applies the !importantthings, you should be able to do something like this:

在应用这些事情<script>之后的右边，你应该能够做这样的事情：<style>!important

var lastStylesheet = document.styleSheets[document.styleSheets.length - 1];
lastStylesheet.disabled = true;

document.write('<style type="text/css">');
// Call fixBackground for each element that needs fixing
document.write('</style>');

lastStylesheet.disabled = false;

function fixBackground(el) {
    document.write('html #' + el.id + ' { background-image: ' +
        document.defaultView.getComputedStyle(el).backgroundImage +
        ' !important; }');
}

This probably depends on what kind of browser compatibility you need, though.

不过，这可能取决于您需要什么样的浏览器兼容性。