I have these 3 Boxes with the same classes and a button:

function turnRedAndAddPadding() {
  /* ??? */
}

.box {
  border: 1px solid;
  display: inline;
}

<button onclick="turnRedAndAddPadding();">Press</button>

<div >Box 1</div>
<div >Box 2</div>
<div >Box 3</div>

I want to add styles to the class .box when clicking on the button without adding a new class to the boxes. Basically, if you press the button, the class .box should get a red background color and a padding and all the elements that have this class should have the same. Is there an easy way in JavaScript to solve this problem?

Thanks in advance.

CodePudding user response：

You don't really want to add properties to the existing class. What you should do is add a new class that contains those red/padding properties to each element's class list.

Toolkit

1. You need some way to "pick up" the elements for processing. Since you have more than one querySelectorAll is probably the go-to choice which will give you a static nodelist (rather than a live HTML collection that methods like getElementsByClassName give you which have some side-effects if you don't use them correctly.)

2. You'll want a way to iterate over the elements to the processing. There are a number of possibilities provided in that link but forEach is a good choice here.

3. You'll want a way to update the class list of each element in the iteration. The unsuprisingly-named classList has, among its methods, add which accepts a string of the CSS class you want to add.

4. Define a new class ("redpad" in this example) that can be used.

5. Finally, because you want to avoid inline JS in 2023, you should be using addEventListener which accepts a) an event type and b) the name of the function you want to call when that event is fired.

const button = document.querySelector('button');
const boxes = document.querySelectorAll('.box');

button.addEventListener('click', turnRedAndAddPadding);

function turnRedAndAddPadding() {
  boxes.forEach(box => {
    box.classList.add('redpad');
  });
}

.box {
  border: 1px solid;
  display: inline;
}

.redpad {
  background-color: red;
  padding: 0.5em;
}

<button type="button">Press</button>

<div >Box 1</div>
<div >Box 2</div>
<div >Box 3</div>

CodePudding user response：

Based on that post you could try something like this:

function turnRedAndAddPadding() {
  stylesheet = document.styleSheets[0]
  stylesheet.insertRule(".box { background-color: red; padding: 10px;}", 0);
}

.box {
  border: 1px solid;
  display: inline;
}

<button onclick="turnRedAndAddPadding();">Press</button>

<div >Box 1</div>
<div >Box 2</div>
<div >Box 3</div>

Hope it helps.

CodePudding user response：

Yes, you can add styles to the class .box with JavaScript using the style property.

Here's an example:

function turnRedAndAddPadding() {
  let stylesheet = document.styleSheets[0];
  let newRule = ".box { background-color: red; padding: 10px;}";
  if (stylesheet.insertRule) {
    stylesheet.insertRule(newRule, stylesheet.cssRules.length);
  } else if (stylesheet.addRule) {
    stylesheet.addRule(".box", newRule.substring(newRule.indexOf("{") 1,newRule.lastIndexOf("}")));
  }
}

.box {
  border: 1px solid;
  display: inline;
}

<button onclick="turnRedAndAddPadding();">Press</button>

<div >Box 1</div>
<div >Box 2</div>
<div >Box 3</div>

CodePudding user response：

Some really useful documentation by W3 Schools talks about how to use getElementsByClassName which you can find here You can find about editing the padding as well from here via the padding property of each element.

Below I am finding all div's that have the class box. Then iterating over each of them and assigning the colour and padding. You can change this to your liking.

There are also many other properties that you can edit for each DOM element like divs!

function turnRedAndAddPadding() {
  const collection = document.getElementsByClassName('box');

  for (let i = 0; i < collection.length; i  ) {
    collection[i].style.backgroundColor = 'red';
    collection[i].style.padding = '5px';
  }
}

CodePudding user response：

Just adding some javascript you can achieve your goal.

document.querySelectorAll with this you can collect all elements with class box and then loop with a foreach function

function turnRedAndAddPadding() {
  let box = document.querySelectorAll('.box');
  box.forEach(el => {
    el.style.background = 'red';
    el.style.padding = '20px'
  })
}

.box {
  border: 1px solid;
  display: inline;
}

<button onclick="turnRedAndAddPadding()">Press</button>

<div >Box 1</div>
<div >Box 2</div>
<div >Box 3</div>