How to overwrite an !important CSS property in jQuery

Question

I have css on my page's body and I would like to overwrite overflow: visible !important;. I have tried the jQuery script below, but that doesn't do it"

 jQuery("body, #s4-workspace").css("overflow", "hidden !important");

CSS:

body, #s4-workspace {
    overflow: visible !important;
}

body {
    height: 100%;
    overflow: hidden; //overriden
    width: 100%;
}

I know there are two overflow already, but sadly I don't have the hand on that, otherwise it would be too easy, wouldn't it?

or is there a way to just remove overflow: visible !important; — user472285, Jun 28 '11 at 12:52

score 1 · Answer 1 · answered Jun 28 '11 at 12:39

1

AFAIK jQuery does not understand the !important part.

Try creating a class, like this:

.newClass {
   overflow: hidden !important;
}

And then set the class like this:

jQuery("body, #s4-workspace").addClass('newClass');

answered Jun 28 '11 at 12:39

Pablo Fernandez

98,892
55
184
226

or is there a way to just remove overflow: visible !important; – user472285 Jun 28 '11 at 12:50
you could remove it if it was set in a class – Pablo Fernandez Jun 28 '11 at 12:57

Wesley Murch · Accepted Answer · 2011-06-28T12:54:57.830

1

As mentioned, ! important is not handled well by jQuery's css().

Here is a hack that will work if you don't mind overwriting the inline style attribute value (if it exists):

 jQuery("body, #s4-workspace")
     .attr("style", "overflow:hidden !important");

Like I said, it's a hack - but give it a try.

Demo: http://jsfiddle.net/dGbaD/

edited Jun 28 '11 at 12:54

answered Jun 28 '11 at 12:47

Wesley Murch

98,378
36
187
224

or is there a way to just remove overflow: visible !important; – user472285 Jun 28 '11 at 12:50
I don't think you can just "remove" it, it must be set to another value. Check the demo and see if that helps, I revised the errors in my previous answer. – Wesley Murch Jun 28 '11 at 12:56

score 0 · Answer 3 · edited May 23 '17 at 12:08

0

jQuery can't manage !important rules.

See:

How to apply !important using .css()?

http://hungred.com/how-to/jquery-javascript-css-important/

edited May 23 '17 at 12:08

Community

1
1

answered Jun 28 '11 at 12:36

jjmontes

20,566
4
34
50

How to overwrite an !important CSS property in jQuery

3 Answers3