How to change a property of a CSS class dynamically using javascript (no JQuery)

Question

I am trying to perform a transition (reducing or extending the height of a DIV). I would like to know how to go about altering a specific property (in this case 'height') associated with a specific class involved in the transition before invoking the transition by changing the CSS classname associated with the element using javascript?

So in the example below, I would like to change the 'height' property of '. sboxopen' from 130px to 360px. Then invoking the transition by changing the element's class name - > Object.className = 'sboxopen';

CSS classes:

.sbox{
height: 0px;
transition: height 1s ease-out;
overflow: hidden;
}
.sboxopen{
height: 130px;
transition: height 1s ease-out;
overflow: hidden;
}

TRANSISTION USING JAVASCRIPT:

 Object.className = 'sbox';

or

 Object.className = 'sboxopen';

If I cannot change the property of the classes, how do I go about creating a new CSS class dynamically using javascript so that I can incorporate the desired 'height' property for my desired transition?

Possibly a duplicate of https://stackoverflow.com/questions/8098406/code-with-classlist-does-not-work-in-ie in another form — Jay, Jul 25 '18 at 14:55
Your approach won't work; if you need the height to be dynamic, then you should just manipulate the height directly (`el.css.height = '360px'`). See https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style. — CherryFlavourPez, Jul 25 '18 at 14:59
No. As I am trying to perform a transition that will not work. tried it — johnDoe, Jul 25 '18 at 14:59
Point is, you can't really manipulate the individual properties of your CSS class using JavaScript, and creating new CSS classes in JS, while possible, is a lot of unnecessary work. I would check out https://gomakethings.com/how-to-add-transition-animations-to-vanilla-javascript-show-and-hide-methods/ for a working example. — CherryFlavourPez, Jul 25 '18 at 15:05

Takit Isy · Accepted Answer · 2018-07-25T15:14:04.683

I don't know what triggers your animation, but let's say it's a click on each of the .sbox elements.

As you can't change the CSS, you can instead use the script to add an inline style height using .style.height.

Here is a snippet:

var sboxes = document.querySelectorAll(".sbox");

sboxes.forEach(function(box, index){
  box.onclick = function(){
    box.style.height = "360px";
    box.className = 'sboxopen';
  }
})

.sbox {
  height: 0px;
  transition: height 1s ease-out;
  overflow: hidden;
  border: 8px solid gray; /* Added for better visibility */
}

.sboxopen {
  height: 130px;
  transition: height 1s ease-out;
  overflow: hidden;
  border: 8px solid gray; /* Added for better visibility */
}

<div class='sbox'>Box 1</div>
<br>
<div class='sbox'>Box 2</div>
<br>
<div class='sbox'>Box 3</div>

⋅ ⋅ ⋅

Then, we can imagine using custom heights from a custom attribute, for each of the .sbox:

var sboxes = document.querySelectorAll(".sbox");

sboxes.forEach(function(box, index){
  box.onclick = function(){
    box.style.height = box.getAttribute('myHeight');
    box.className = 'sboxopen';
  }
})

.sbox {
  height: 0px;
  transition: height 1s ease-out;
  overflow: hidden;
  border: 8px solid gray; /* Added for better visibility */
}

.sboxopen {
  height: 130px;
  transition: height 1s ease-out;
  overflow: hidden;
  border: 8px solid gray; /* Added for better visibility */
}

<div class='sbox' myHeight='30px'>Box 1</div>
<br>
<div class='sbox' myHeight='60px'>Box 2</div>
<br>
<div class='sbox' myHeight='360px'>Box 3</div>

Feel free to comment if any.

Hope it helps.

How to change a property of a CSS class dynamically using javascript (no JQuery)

1 Answers1