Adding '!important' property to css inside iframe using jquery

Question

I have a frame and dynamically applying the 'header' class to the frame. It is working fine but need to add '!important' at the end of each css property.

I applied in the following way but not working.

var divblock = '.header';
$('#frame').contents().find('header').addClass('header');

$('#frame').contents().find(divblock).css({
    'color': objProp.css[pageSection]['color']+ '!important',
    'background-color': objProp.css[pageSection]['background']+'!important',
    'font-size': objProp.css[pageSection]['font-size']+'!important'
});

Adding **!important** is not possible with `jQuery .css`, you have to use it like `setAttribute("style", "width: 12px !important");` Plain JS — Abhi, Aug 11 '15 at 12:09
@abhi Nope. It can be done with jquery. `.css(property,value,priority)` — Rajaprabhu Aravindasamy, Aug 11 '15 at 12:10
@RajaprabhuAravindasamy It never worked for me, so I used the `setAttribute` method only. — Abhi, Aug 11 '15 at 12:13
[THIS](http://stackoverflow.com/questions/11962962/overriding-important-with-css-or-jquery) answer may help — Abhi, Aug 11 '15 at 12:21
@RajaprabhuAravindasamy there is no overload with those parameters in css-function: http://api.jquery.com/css/ — Esko, Aug 11 '15 at 12:32

score 1 · Answer 1 · answered Aug 11 '15 at 12:32

We can't add the !important using jQuery but you can override the style like as follow.

// CSS styles 
.header{
  color:red;
 }

.importantHeader{
   color: black !important;
}

//script

$('#frame').contents().find('header').addClass('imporatantHeader');

Not this but you can use same class number of times and for this you have to just write one line of code jQuery Code.

This called reusable.

Good Luck ['}

Adding '!important' property to css inside iframe using jquery

1 Answers1