如何通过JavaScript函数动态设置元素的CSS动画属性？

1. 修正HTML结构 #

DIV元素不支持onload事件，移除无效的属性，改为页面加载完成后统一配置：

<div id="block1">First</div>
<div id="block2">Second</div>
<div id="block3">Third</div>

2. 保留基础CSS样式 #

基础动画样式不变，后续通过JS覆盖个性化属性：

#block1 {
  background: red;
}
#block2 {
  background: gold;
}
#block3 {
  background: green;
}

#block1, #block2, #block3 {
  position: relative;
  width: 100px;
  height: 100px;
  animation: mymove 3s ease-in-out infinite alternate;
}

@keyframes mymove {
  from {transform: translateX(100px);}
  to {transform: translateX(0px);}
}

3. 重写setStyle函数并配置调用 #

改用元素ID+配置对象的形式传递参数，逻辑更清晰，扩展性更强：

function setStyle(elementId, options) {
  const elm = document.getElementById(elementId);
  if (!elm) return;

  // 设置动画时长
  if (options.duration) {
    elm.style.animationDuration = options.duration;
  }

  // 设置动画时间函数（可选）
  if (options.timingFunction) {
    elm.style.animationTimingFunction = options.timingFunction;
  }

  // 处理位移变换：修改@keyframes规则实现个性化目标
  const transforms = [];
  if (options.translateX !== undefined) {
    transforms.push(`translateX(${options.translateX})`);
  }
  if (options.translateY !== undefined) {
    transforms.push(`translateY(${options.translateY})`);
  }
  if (transforms.length > 0) {
    const keyframes = document.styleSheets[0].cssRules || document.styleSheets[0].rules;
    for (const rule of keyframes) {
      if (rule.name === 'mymove') {
        rule.cssRules[0].style.transform = transforms.join(' ');
        rule.cssRules[1].style.transform = 'translate(0, 0)';
      }
    }
  }
}

// 页面DOM加载完成后执行配置
window.addEventListener('DOMContentLoaded', () => {
  // block1：动画时长设为4秒
  setStyle('block1', { duration: '4s' });
  // block2：沿X轴移动300px
  setStyle('block2', { translateX: '300px' });
  // block3：沿Y轴移动100px
  setStyle('block3', { translateY: '100px' });

  // 示例：同时设置X/Y轴位移+自定义时长
  // setStyle('block4', { duration: '5s', translateX: '200px', translateY: '150px' });
});

核心说明 #

• 配置对象替代零散参数，避免参数顺序混乱，支持任意组合的个性化配置。
• 直接修改CSS关键帧规则，解决了元素行内样式被@keyframes覆盖的问题。
• 用DOMContentLoaded确保DOM加载完成后执行函数，避免找不到元素的错误。

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