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

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!

CodePudding user response：

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:

CodePudding user response：

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

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