Making an inline css to be more powerful than an external !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?

Perhaps this will help: [apply !important CSS style using jQuery](http://stackoverflow.com/questions/2655925/apply-important-css-style-using-jquery) — dc5, Sep 14 '13 at 05:47

score 0 · Answer 1 · answered Sep 14 '13 at 04:04

0

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/

answered Sep 14 '13 at 04:04

ahren

16,803
5
50
70

Thanks for your time to answer. However, it only applies on the first image of the slider upon load. Also, I don't want to set a constant width. I want the slider script's automatically generated width to take importance. Any way to just append !important to the inline css? – pau Sep 14 '13 at 04:15
Yes, well you can use the above as a base. – ahren Sep 14 '13 at 04:26

score 0 · Answer 2 · answered Sep 14 '13 at 04:09

0

Not with jquery per se but you can use the setProperty like this:

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

answered Sep 14 '13 at 04:09

Max Hartshorn

709
7
19

score 0 · Answer 3 · answered Sep 14 '13 at 05:27

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);

score 0 · Answer 4 · answered Sep 14 '13 at 05:38

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.

Making an inline css to be more powerful than an external !important?

4 Answers4