An easy way to switch styles between multiple elements in Javascript?-CodePudding

Let's say I have following situation which I have to switch the style for several elements and switch them back when a specific condition is met.

let div = document.querySelectorAll('div')
document.querySelector('button').addEventListener('click', function() {
  div[0].classList.toggle("div1")
  div[1].classList.toggle("div2")
  div[2].classList.toggle("div3")
  div[0].classList.toggle("new1")
  div[1].classList.toggle("new2")
  div[2].classList.toggle("new3")
})

.div1 {
  color: red;
}

.div2 {
  color: green;
}

.div3 {
  color: grey;
}

.new1 {
  color: yellow;
  background: grey
}

.new2 {
  color: pink;
  background: green
}

.new3 {
  color: orange;
  background: red
}

<div class='div1'>1</div>
<div class='div2'>2</div>
<div class='div3'>3</div>
<button>Click</button>

I am now creating several class and use classList.toggle() to switch between them, it absolutely work but the code looks so massy and I want to make my code more readably, what will a better solution for this kinds of situation.

I have thought of switching between with/without a specific css stylesheet, but I don't think it will work for my situation and I need to consider overwriting problem? (Correct me if I am wrong).

Could anyone suggest me an alternative and better solution of solving this situation like this where you have to assign lots of styles to multiple elements or is there an easy way?

*I know this is a stupid example and in this example, a possible solution is to use a forEach loop and use template literal for the className, but this is just a minimal example I created because of Stack overflow rule, so please don't blame me on this rough example. My actual code contains more different html tags and css styles I have to deal with. By storing them in a variable and keeping switching class between them is too messy and annoying.

My code looks something like this:

CodePudding user response：

So here's what I recommend: You can use conditional styling to change everything in one place. Example:

.a {
  /* one set of styles */
}

.b .a {
  /* set a different set of styles */
}

This way, you can conditionally set class b on a higher level element (like document.body) and change all your styles automatically.

CodePudding user response：

You can change the classes of the elements in a loop (assuming you have your css pre-formated). For example;

/**
* When the BUTTON with the id named 'clickMe' is click
* Select all the DIV elements
* Foreach DIV selected, if the DIV contains the 'old-class-name'; remove it.
* Add the new class name to the class-list of the selected DIV
*/
document.body.querySelector('#clickMe').addEventListener('click',()=>{
    document.body.querySelectorAll('DIV').forEach((D,I)=>{
      if(D.classList.contains('old-class-name')) D.classList.remove('old-class-name');
      D.classList.add(`new-class-name-${I}`);
    });
});

// List of CSS class names.

.new-class-name-0{
  color: orange;
}

.new-class-name-1{
  color: green;
}

.new-class-name-2{
  color: blue;
}

<div >Div 1</div>
<div >Div 2</div>
<div >Div 3</div>
<button id="clickMe">Click</button>