CSS classes in JavaScript

Question

I have used someone else's snippet for a background and color colour change which stores the changes in HTML5 session. This is working great for me.

However, I would really like to elaborate on it slightly, and this is where I am stuck.

Here is an example pen I've done, using the code of my current in-progress site: https://codepen.io/iamfnah/pen/NgoyKy

Notice the body background and color classes toggle, using the checkbox beneath the accordion.

Here is the JS from that example:

    document.body.style.backgroundColor = sessionStorage.getItem('bg');
document.body.style.color = sessionStorage.getItem('cc');
function dark() {
     if ( sessionStorage.getItem('bg') === 'rgb(255, 255, 255)') {

            sessionStorage.setItem('bg', 'rgb(51, 51, 51)');
            sessionStorage.setItem('cc', '#00ff00');
     }
    else if (sessionStorage.getItem('bg') == null || undefined) {
        sessionStorage.setItem('bg', 'rgb(51, 51, 51)');
        sessionStorage.setItem('cc', '#00ff00');

    }
    else if( sessionStorage.getItem('bg') === 'rgb(51, 51, 51)') {

        sessionStorage.setItem('bg', 'rgb(255, 255, 255)');
        sessionStorage.setItem('cc', '#333');
    }
document.body.style.backgroundColor = sessionStorage.getItem('bg');
document.body.style.color = sessionStorage.getItem('cc');
}

There are CSS classes of the accordion, Bootstrap default classes, which I wish to also control the colour changing of, using the same toggle checkbox.

Those are .panel-body and .panel-default>.panel-heading.

So on toggling to the dark background, I want these styles applied;

.panel-body {
  background-color: #1b1b1b;
  color: #ccc;
}
.panel-default>.panel-heading {
  background-color: #373737;
  color: #ccc;
}

I have no idea how you specify such styles within the JS though. I'm making an assumption, that a couple of lines need adding to the top of the JS for the sessionStorage.getItem to define these classes, and then reference them similarly to the bg and cc ones already in the example?

I've tried, but everything I've tried breaks the script from working.

Can anyone please help with the correct JS I need to extend my current script?

Thanks.

I added a live example to my answer: stackoverflow.com/a/45080902/5734311 — user5734311
– user5734311, Commented Jul 13, 2017 at 14:56

score 1 · Accepted Answer · 2017-07-13 14:55:32Z

1

The easiest way is to make all your rules depend on a body class:

body.theme1 .panel-body {
  background-color: #1b1b1b;
  color: #ccc;
}
body.theme1 .panel-default > .panel-heading {
  background-color: #373737;
  color: #ccc;
}

Store all your styles in rules like that.

To change the theme, all you need to do is call this:

document.body.className = "theme1";

This is obviously also the only thing you need to store in sessionStorage.

Here's a live example: https://jsfiddle.net/khrismuc/q1o1jmoq/

edited Jul 13, 2017 at 14:55

answered Jul 13, 2017 at 12:40

user5734311

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

1 Comment

user2960372 Over a year ago

Thanks! appreciate the live example, as I couldn't figure it out myself. I have implemented that into my actual website and it works like a charm now. I like this method too as once your JS has been added, I can easily theme more elements of my site to the dark theme using just CSS, which I am ok with - certainly a better understanding of it than JS anyway. Good stuff

Renzo Calla · Accepted Answer · 2017-07-13 12:48:01Z

1

Try adding this panel-dark class codepen

.panel-dark .panel-body {
  background-color: #1b1b1b;
  color: #ccc;
}
.panel-dark .panel-default>.panel-heading {
  background-color: #373737;
  color: #ccc;
}

answered Jul 13, 2017 at 12:48

Renzo Calla

7,7362 gold badges25 silver badges39 bronze badges

1 Comment

user2960372 Over a year ago

Thanks, this pen you've done is kind of working. It changes the colours which is great. But it doesn't make use of the sessionStorage I think. I've added your code to my website, but when I refresh the page, or come back to the page from another page, the accordion styles revert, and I must click my toggle button again for them to go dark, My other styles though, like the body background, retain. I'm guessing it's something to do with the 'panelDark' not having sessionStorage? Though not sure how best to implement that. Have you any idea how please?

Karvannan Thi · Accepted Answer · 2017-07-13 12:43:48Z

0

getElementsByTagName returns an array of nodes so you must use [] to access elements.

Try

document.getElementsByTagName("body")[0] .style.backgroundColor = sessionStorage.getItem('bg');

answered Jul 13, 2017 at 12:43

Karvannan Thi

566 bronze badges

Comments

renaud · Accepted Answer · 2017-07-13 12:49:37Z

0

Depending on the browser compatibility you want to target (IE10+), you can add/remove/toggle classes with classList

document.body.classList.add('panel-body')
document.body.classList.remove('panel-body')

answered Jul 13, 2017 at 12:49

renaud

113 bronze badges

Comments

Scott Marcus · Accepted Answer · 2017-07-13 12:55:46Z

0

Both JQuery as well as vanilla JavaScript make this very easy because they allow you to find elements based on standard CSS syntax, so if you are trying to style your accordion (let's say it has an id of accordion and you've previously stored the class names in sessionStorage and retrieved them and that they are now stored in the string variables pb and ph)...

JQuery:

$("#accordion").addClass(pb + " " + ph);
// There is also .removeClass() and .toggleClass()

JavaScript:

document.getElementById("accordion").classList.add(pb, ph);
// There is also .remove() and .toggle()

While you can access an element's className property and supply class names as a space separated list, using classList.add() and classList.remove() is much simpler and less bug prone.

edited Jul 13, 2017 at 12:55

answered Jul 13, 2017 at 12:45

Scott Marcus

66k6 gold badges54 silver badges81 bronze badges

2 Comments

Vikrant Over a year ago

I think toggle is preferred to avoid multiple lines code

Scott Marcus Over a year ago

@Vikrant Not necessarily, It entirely depends on what you are doing.

Collectives™ on Stack Overflow

CSS classes in JavaScript

5 Answers 5

1 Comment

1 Comment

Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

1 Comment

Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related