Update CSS in JavaScript / jQuery

Question

The following code is an example of open and close actions of a sidebar, where some CSS values should be updated to correctly show the sidebar.

function openNav() {
    document.getElementById("sidebar").style.width = "250px";
    document.getElementById("mainContent").style.marginLeft = "250px";
    document.getElementById("codePanel").style.marginLeft = "10px";
}

function closeNav() {
    document.getElementById("sidebar").style.width = "0";
    document.getElementById("mainContent").style.marginLeft = "0px";
    document.getElementById("codePanel").style.marginLeft = "40px";
}

Now I ask myself if there is a better way to do this if I eg update more different styles?

Because in this code, I would need to add more and more similar looking lines of code which looks really clunky.

instead of manipulating style property, Create CSS class and add/remove them as per requirement — Satpal
– Satpal, Commented Jul 15, 2017 at 10:29
But how do I add this class to all elements when they all have different ids? I'd need to update the Class for all of these elements in single lines or not? — Martin Niederl
– Martin Niederl, Commented Jul 15, 2017 at 10:30

adeneo · Accepted Answer · 2017-07-15 10:36:10Z

2

If you add an initial class to all your elements that you want to update

<div id="sidebar" class="update"></div>
<div id="codePanel" class="update"></div>

Then add some styles (be aware of style specificity)

#sidebar.update {
    width : 200px;
}

#sidebar.update.updated  {
    width : 250px;
}

#codePanel.update.updated {
    color : red;
}

You can easily add that class to multiple elements in a loop

var elems = document.querySelectorAll('.update');

elems.forEach(function(elem) {
    elem.classList.add('updated');
});

answered Jul 15, 2017 at 10:36

adeneo

319k29 gold badges410 silver badges392 bronze badges

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

Comments

kapreski · Accepted Answer · 2017-07-15 10:46:14Z

1

as the other members mentioned it is better to use class, what I want to add is that you can create those css classes based on specific style for example create a class called marginLeft50 which sets the left margin to 50 so whenever you want to update an element css you can simply do $('sidebar').addClass('marginLeft50'); keep in mind that you can add multiple classes to a single element, and since you mention jquery in your tags, jquery takes care of looping through all the targeted elements and updating each one of them

and as simply you can $('selector').removeClass('className') whenever you need to

answered Jul 15, 2017 at 10:46

kapreski

7715 silver badges21 bronze badges

Collectives™ on Stack Overflow

Update CSS in JavaScript / jQuery

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related