使用 javascript 更改 css class 属性值

Question

I want to change the value of one of the attributes of css class dynamically

Here's my scenario:

I've many elements using one class, instead of getting them all and looping them over and applying style, I want to change the value of one of the attributes of class, which is alredy applied on them. for example

.prodName {
  max-width: 270px;
  display: block;
}

above class is being used by many elements, and I want to alter one of the attributes of that class like

.prodName {
  max-width: 350px <---
  display: block;
}

is there any simple method for this in javascript.

Before I post this question, I already searched but didn't find anything easy and useful. thanks in advance to helping hands.

Answer 1

You can use CSS variables for this case.

 const root = document.querySelector(':root'); function play() { root.style.setProperty('--size', '300px'); }

 :root { --size: 100px; }.container { background-color: red; width: var(--size); height: var(--size); cursor: pointer; }

 <div class="container" onclick="play()"></div>

Answer 2

Add new class to CSS:

.mw350 {
  max-width: 350px;
}

Then add new class to the element in JS:

document.querySelector('.prodName').className += ' mw350'; // <-- better to select using unique IDs, like '#prodNameElement'

Answer 3

You could use a CSS variable for this.

1. On any of the parent elements: set the variable.
2. In CSS, rather than hard-coding the value, set it to the current value of the variable.
3. With JavaScript, change the variable to a new value, on the parent.

Example:

 function setBorderColor() { document.querySelector('.products').style.setProperty('--border-color', 'blue'); }

 .products.colored-title { border: 1px solid var(--border-color); }

 <div class="products" style="--border-color: red"> <div> <h3 class='colored-title'>Product 1</h3> </div> <div> <h3>Product 2</h3> </div> <div> <h3 class='colored-title'>Product 3</h3> </div> <div> <h3 class='colored-title'>Product 4</h3> </div> <div> <h3 class='colored-title'>Product 5</h3> </div> <div> <h3 class='colored-title'>Product 6</h3> </div> <button onclick="setBorderColor()">Set border to blue</button>