How to append !important to an inline css?

Question

It's really hard for me to figure this out. But can anyone give me a sample script where I can just add !important to an already existing inline css?

Answer 1

You can add !important to inline using below code,

Suppose you want to add inline css for div tag then you can do that using below code.

CSS way

<div style="color:red !important"

jQuery

$('div').attr('style', 'color:red !important;');

Answer 2

You can get the inline styles using the attr, and manipulate them like below,

var styleCode = $('p').attr('style').split(";");
$('p').attr('style',styleCode.join(' !important;'));

Check this Fiddle

Answer 3

.attr()

$(element).attr('style', 'height:200px !important;')

Answer 4

HTML

<div class="yourelementclass"></div>  

JS Code

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

Here is jsfiddle

Answer 5

A non-library specific way would be to use the += operator to append !important to the value.

<div style="width:50px;" id="id1"></div>

document.getElementById("id1").style.width += " !important";

Answer 6

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