使内联css比外部！important重要吗？

Question

I have a slider script and a template external stylesheet, both I MUST use. I was instructed to just use a custom.css to override the template external stylesheet.

My problem is, the slider css in the template has an !important. The slider script calculates the width and height of the images and inserts it through inline css. I want the inline css to take more power in the cascade rather than the !important in the template stylesheet.

For example:

In html doc, after it load the slider script:

<img src="slide1.jpg" style="width: 980.2545515px;" />

In template stylesheet:

img {
width: 500px !important;
}

I tried using jquery such as:

$("img").css("width","500px");

However, it doesn't override anything. Note that I need the automatically generated width to override anything. But I can't seem to find a way to override the width: 500px !important - width: auto/width: inherit doesn't work neither.

Any solutions?

Answer 1

You can't really do it using the .css() method, but you can do it using the .attr() method, however this would overwrite any other inline styles you already have.

$('img').attr('style', 'width:500px !important;')

Here's a demo: http://jsfiddle.net/AGuvg/

Answer 2

本身没有jquery，但是您可以使用setProperty如下所示：

$('img')[0].style.setProperty( 'width', '500px', 'important' );

Answer 3

You could generate an extra stylesheet dynamically. This sample works with Chrome but I have no idea of how it behaves in other browsers : http://jsfiddle.net/mj2Um/ .

var stylesheet;
function setWidth(value) {
    stylesheet && stylesheet.remove();
    stylesheet = $('<style>img{width:' + value + 'px !important;}</style>');
    stylesheet.appendTo('body');
}
setWidth(150);

Answer 4

If you need the dynamically generated width to be the one applied, the only way is to add !important to that in the inline style. You could do it like:

var styleAttr = $(".slider-image").attr("style");

styleAttr += " !important";  
/* ^^ assumes styleAttr is just 'width: 980.2545515px' and so 
becomes 'width:   980.2545515px !important' - if the style attribute is more 
complex than this you'd need a bit more sophisticated parsing of it */

$(".slider-image").attr('style', styleAttr);

This will force the dynamic width to override the stylesheet !important one.