How to set display property inline with !important

Question

I want to write an inline style viz block !important using javascript code. Code looks like this

element.style.display = 'block !important'; // This does not work (Approach 1)

However,

element.style = 'display:block !important'; // works perfectly (Approach 2)

But Approach 2 is not acceptable for the obvious reason it will over-ride earlier inline styles. You can see this in this DEMO at Jsbin

Q1: How can I set display: block !important property using javascript and it has to be inline.

Q2: I want to know why Approach1 does not work ?

Here´s another good solution: element.setAttribute ('style', 'display: block !important;'); — Jorge Mauricio, Sep 09 '21 at 19:28

Pinal · Accepted Answer · 2017-03-09T01:24:14.820

8

I think it will help you:

element.style.cssText += ';display:block !important;'

edited Mar 09 '17 at 01:24

answered Nov 20 '13 at 08:47

Pinal

1 Answers1