How to overwrite an !important CSS property in jQuery

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?

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/

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

jQuery can't manage !important rules.

See:

How to apply !important using .css()?

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