如何在不重叠旧样式的情况下使用 JS 添加样式？答案

【问题标题】：How do I add style with JS, without overlapping the old style?如何在不重叠旧样式的情况下使用 JS 添加样式？
【发布时间】：2021-11-05 09:12:04
【问题描述】：

我是 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 吗？谢谢！

【问题讨论】：

translateX 也应该是动画的吗？

标签： javascript css transform

【解决方案1】：

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

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

进一步阅读：

【讨论】：

【解决方案2】：

您可以使用 += 运算符将 translateX 附加到已经存在的转换中。例如：

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

【讨论】：

fallingBlock.style.transform 为空，因为没有设置 inline 样式。但是，附加一些东西会让字符串增长。