How do I add style with JS, without overlapping the old style?

user_16172046 0
Viewed 82

I'm new at JS, and I wonder how I can add a style with JS, like...

document.getElementById("id").style.transform = "translateX(50%)";

...but without overlapping the style I wrote in the css.

Here's my exaple. CSS:

#falling-block {
    margin-top: 21px;
}
@keyframes falling {
    from {
        transform: translateY(0%);
        margin-bottom: 0;
    }
    to {
        transform: translateY(1250%);
        margin-bottom: 0;
    }
}

And here's my JS:

const ranCol = Math.floor(Math.random()*3);
const fallingBlock = document.getElementById('falling-block');
if (ranCol==0) {
    fallingBlock.style.transform = 'translateX(-28%)';
} else if (ranCol==1) {
    fallingBlock.style.transform = 'translateX(0%)';
} else if (ranCol==2) {
    fallingBlock.style.transform = 'translateX(28%)';
}
fallingBlock.style.animation = 'falling 4s linear infinite';

So it changes the transform in the JS, but I still want the already written transform. Can I just add the translateY and keep the translateX? Thank you!

transform css javascript
2 Answers

At any time, if you want to calculate the styles that apply to an element, you can use:

  • let myElementCurrentPropertyValue = window.getComputedStyle(myElement).getPropertyValue(myProperty);

In this case, since you want to know the value of the transform property, you can use:

let myDivTransform = window.getComputedStyle(myDiv).getPropertyValue('transform');

Once you have that computed property value you can modify it using myElement.style.setProperty(property, value):

myDiv.style.setProperty('transform', myDivTransform + ' skew(20deg, 20deg)');

Working Example:

// GRAB DOM ELEMENTS
const myDiv = document.querySelector('div');
const buttonGroup = document.querySelector('.buttonGroup');

// APPLY INITIAL CSS TRANSFORM VALUE TO MYDIV
setTimeout(() => {myDiv.classList.add('changeRotation');}, 300);

// applyDirective() FUNCTION
const applyDirective = (e) => {

  let myDivTransform = window.getComputedStyle(myDiv).getPropertyValue('transform');

  switch (e.target.dataset.directive) {
  
    case ('deepen') : myDiv.style.setProperty('transform', myDivTransform + ' skew(-20deg, -20deg)'); break;
    case ('flatten') : myDiv.style.setProperty('transform', myDivTransform + ' skew(20deg, 20deg)'); break;
    case ('grow') : myDiv.style.setProperty('transform', myDivTransform + ' scale(2.5)'); break;
    case ('shrink') : myDiv.style.setProperty('transform', myDivTransform + ' scale(0.4)'); break;
    case ('moveRight') : myDiv.style.setProperty('transform', myDivTransform + ' translate(60px, 60px)'); break;
    case ('moveLeft') : myDiv.style.setProperty('transform', myDivTransform + ' translate(-60px, -60px)'); break;
  }
}

// ADD EVENT LISTENER
buttonGroup.addEventListener('click', applyDirective, false);
div {
  width: 60px;
  height: 60px;
  margin: 24px auto 36px;
  background-color: rgb(255, 0, 0);
  vertical-align: middle;
  transition: transform 1.2s linear;
}

div.changeRotation {
  transform: rotate(315deg);
}

.buttonGroup {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  width: 100%;
}

button {
  flex: 0 0 25%;
  margin: 12px calc(25% / 6);
}
<div></div>

<aside class="buttonGroup">
  <button type="button" data-directive="deepen">Deepen</button>
  <button type="button" data-directive="grow">Grow</button>
  <button type="button" data-directive="moveRight">Move Right</button>
  <button type="button" data-directive="flatten">Flatten</button>
  <button type="button" data-directive="shrink">Shrink</button>
  <button type="button" data-directive="moveLeft">Move Left</button>
</aside>

Further Reading:

user_38977750

You could use the += operator to append the translateX to the already existing transformation. for example:

fallingBlock.style.transform += "translateX(-28%)";
user_74942180
Related