如何使用JavaScript动态调整自定义CSS样式属性？

实现方案 #

你遇到的问题本质是对象属性访问语法的使用误区，以及样式操作API的用法错误，可通过以下两种方式实现需求：

• 方案1：方括号语法访问style对象属性
  JS中通过点语法访问对象属性时，属性名会被当作固定字面量解析，不会读取对应变量的值，改用方括号语法即可传入动态变量作为属性名：

  let myProperty = "top", value = "30px";
  const myDiv = document.querySelector('div'); // 假设已获取到目标元素
  // 方括号内会解析变量的实际值作为属性名
  myDiv.style[myProperty] = value;
  

  这种写法同时支持驼峰格式的JS样式属性（如paddingTop）和短横线分隔的原生CSS属性名（如padding-left），无需额外转换。

• 方案2：使用标准setPropertyAPI（更推荐）
  CSSStyleDeclaration原生提供了setProperty方法专门用于动态设置样式，语义更清晰，还支持额外设置!important优先级：

  // 基础用法
  myDiv.style.setProperty(myProperty, value);
  // 需要设置!important优先级的用法
  myDiv.style.setProperty(myProperty, value, 'important');
  

  该方法兼容性覆盖所有现代浏览器及IE9+，生产环境更推荐使用。

之前写法不生效的原因 #

1. myDiv.style.myProperty = value的写法实际是尝试给style对象添加名为myProperty的自定义属性，不会读取myProperty变量存储的top值，因此不生效。
2. setAttributes()是方法名拼写错误，正确方法名是setAttribute()，就算拼写正确，该方法是用来设置HTML元素属性的，如果用来设置style属性会覆盖元素原有的所有内联样式，除非需要全量替换样式，否则不建议使用：

// 不推荐的写法，会覆盖原有内联样式
myDiv.setAttribute('style', `${myProperty}: ${value}`);

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