如何用JS添加样式且不覆盖原有CSS已设置的样式属性？

transform 是复合单值属性，同一元素上的多个 transform 定义会整体覆盖，不会自动合并不同的 transform 函数。你遇到的冲突原因是：JS 给元素设置了带 translateX 的行内 transform，而 CSS 动画中的 transform 仅定义了 translateY，动画运行时会直接覆盖整行 transform 属性，导致 JS 设置的 translateX 丢失。

方案1：使用 CSS 变量（最推荐） #

通过 CSS 变量注入 JS 计算的水平偏移值，让动画自动拼接 translateX 和 translateY，无需修改 DOM 结构。
修改后的 CSS 代码：

#falling-block {
    margin-top: 21px;
    --x-offset: translateX(0%); /* 定义默认水平偏移变量 */
}
@keyframes falling {
    from {
        transform: var(--x-offset) translateY(0%);
        margin-bottom: 0;
    }
    to {
        transform: var(--x-offset) translateY(1250%);
        margin-bottom: 0;
    }
}

修改后的 JS 代码：

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

方案2：拆分元素层级 #

给目标元素套一层父容器，JS 控制父容器的水平偏移，下落动画放在子元素上，两个 transform 作用于不同元素，完全不会冲突。
新增 HTML 结构：

<div class="falling-wrapper">
    <div id="falling-block"></div>
</div>

原有 CSS 无需修改，调整 JS 逻辑：

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

内容的提问来源于stack exchange，提问作者ThirrezImp