Set a css attribute to important through javascript

Question

On my page I want to set the attribute display to block!important when there's a specific string in the url,

I've been doing some research, but can't find the correct answer. Using the code below I can set the background-color: green!important on the body, but I don't know how to target something else (the "loginActive" id element).

:javascript
  if(window.location.href.indexOf("sign_up") > -1) {
    document.body.style.setProperty ("background-color", "green", "important");
    document.getElementById("loginActive").style.display = "block", "important";
  }

Any tips on how I can set display: block!important on the element #loginActive ?

You shouldn't need to use !important if you're setting styles on the element itself, unless there's something else that's !important elsewhere. If the one elsewhere is !important, presumably whoever added it decided it shouldn't be overridden. Generally, the use of !important is seen as a bad solution to a CSS issue that will come back to bite you, as it sounds it may have done here. — James Thorpe
– James Thorpe, Commented Jan 26, 2016 at 10:42
I'm no fan of using !important, but I'm using it with a angular ng-show function. — alucardu
– alucardu, Commented Jan 26, 2016 at 10:52
document.getElementById("loginActive").style.display = "block", "important"; – that makes no sense, resp. it doesn’t do what you think it does. (Go look up the JS comma operator, if you want to know what your line actually means.) And I don’t understand the question – in the line above, you are able to set a style property with important for the body – so what is stopping you from using that exact same syntax in the second line as well …? — C3roe
– C3roe, Commented Jan 26, 2016 at 11:22

HoangND · Accepted Answer · 2016-01-26 11:11:29Z

4

Try this

var item = document.getElementById("loginActive");
item.style. display = 'block !important';

Or

item.setAttribute('style', 'display:block !important');

But you shouldn't do that

edited Jan 26, 2016 at 11:11

answered Jan 26, 2016 at 10:45

HoangND

4083 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

alucardu Over a year ago

That's no different then document.getElementById("loginActive").style.display = "block", "important";

alucardu Over a year ago

:javascript  if(window.location.href.indexOf("sign_up") > -1) { var item = document.getElementById("loginActive");  item.style.setProperty ("display", "block", "important");  }

changed the code a bit, workse now.

HoangND Over a year ago

My bad, setAttribute actually works better, but you should consider using a class with display: !important and append with to the element

C3roe Over a year ago

@alucardu: Of course that is significantly different – mainly because in your code, you are not setting important at all (you just have a string literal “on its own”, using the comma operator after the first assignment.)

Collectives™ on Stack Overflow

Set a css attribute to important through javascript

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related