Adding and removing div style with javascript while css still applies

Question

I have a DIV with a specific ID ("container") on every page of my site as part of the template.

#container
{
max-width:980px; min-width:980px; padding-top:6px;
}

When a button (to toggle full screen) is clicked i get what is the max supported width of the client and then do:

document.getElementById('container').setAttribute('style', 'max-width:' + width + 'px !important;');
document.getElementById('container').setAttribute('style', 'min-width:' + width + 'px !important;');

This works fine and sets the max-width to say 1400px.

My question is, can I remove this style I just added, so only the css would apply, using javascript ?

Or is my option having the same code, going back to 980?

document.getElementById('container').setAttribute('style', 'max-width:980px !important;');
document.getElementById('container').setAttribute('style', 'min-width:980px !important;');

Are pixels mandatory? Why don't you base yourself on vw units ? Why !important ? You'd be better off with CSS classes, applied conditionally based on fullscreen mode. — Christian Bonato
– Christian Bonato, Commented Mar 10, 2016 at 12:19
I would make a "fullscreen" css class which overrides the default #container styles. Then you can simply add a classname to your element when going fullscreen and remove it when not. — James
– James, Commented Mar 10, 2016 at 12:46

Marcos Pérez Gude · Accepted Answer · 2016-03-10 12:19:01Z

2

You can remove the entire style attribute

 document.getElementById('container').removeAttribute('style');

Or you can remove only the max-width property in the style attribute:

 document.getElementById('container').style.maxWidth = "none";

Refferences:

style

removeAttribute

edited Mar 10, 2016 at 12:19

answered Mar 10, 2016 at 12:14

Marcos Pérez Gude

22.2k4 gold badges41 silver badges70 bronze badges

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

6 Comments

Иво Недев Over a year ago

Brilliant, I was afraid something like this would also remove any css, it doesn't.

Marcos Pérez Gude Over a year ago

This doesn't removes CSS, this manipulates the DOM style attribute, that overrides the defined CSS styles, but don't change anything in your css files.

Christian Bonato Over a year ago

It removes only inline styles.

Marcos Pérez Gude Over a year ago

@Bonatoc why? can you explain? That's the question I guess. Downvotes are not for fun, remember. And why the other answer is the question but this not?

Marcos Pérez Gude Over a year ago

@Bonatoc can you come here and explain? Or you are making a troll-marathon ?

|

gurvinder372 · Accepted Answer · 2016-03-10 12:27:14Z

2

My question is, can I remove this style I just added, so only the css would apply, using javascript ?

You need to use a class here

.default-style
{
   max-width:980px; min-width:980px; padding-top:6px;
}

so while assigning the new width, remove this class first

document.getElementById('container').setAttribute('style', 'max-width:' + width + 'px;min-width:' + width + 'px;');
document.getElementById('container').classList.remove("default-style");

When you want to go back to default

document.getElementById('container').removeAttribute('style');
document.getElementById('container').classList.add('default-style');

Refer to Element.classList for adding/removing class.

edited Mar 10, 2016 at 12:27

answered Mar 10, 2016 at 12:18

gurvinder372

68.6k11 gold badges78 silver badges98 bronze badges

6 Comments

Christian Bonato Over a year ago

My point precisely. But again, !important is a bad habit. max-width can be reset to default browser value if needed.

gurvinder372 Over a year ago

@Bonatoc Removed the !important. It is not required now. I agree that it should be used very carefully

Marcos Pérez Gude Over a year ago

I'm affraid why this is not downvoted by @Bonatoc . I feel like LOL

gurvinder372 Over a year ago

@MarcosPérezGude I am not sure about that too. Anyways, I have removed !important. Note that I'm upvoted this answer. I did yours too, because I liked the simplicity and OP liked it too

Иво Недев Over a year ago

@gurvinder372 And I (OP) upvoted both of you, he was just tiny bit faster.

|

Collectives™ on Stack Overflow

Adding and removing div style with javascript while css still applies

2 Answers 2

6 Comments

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related