javascript - 如何在不与旧样式重叠的情况下使用 JS 添加样式？

Question

我是 JS 的新手，我想知道如何使用 JS 添加样式，例如...

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

...但不会与我在 css 中编写的样式重叠。

这是我的例子。 CSS:

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

这是我的 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';

所以它改变了 JS 中的转换，但我仍然想要已经写好的转换。我可以只添加 translateY 并保留 translateX 吗？谢谢!

Answer 1

任何时候，如果你想计算应用于元素的样式，你可以使用:

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

在这种情况下，由于您想知道 transform 属性的值，您可以使用:

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

一旦您拥有该计算属性值，您就可以使用 myElement.style.setProperty(property, value) 修改它:

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

---

工作示例:

// 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>

---

进一步阅读:

• https://developer.mozilla.org/en-US/docs/Web/API/Window/getComputedStyle
• https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleDeclaration/setProperty