纯JS element.style能否设WebKit CSS属性，还是需用setAttribute？

两种实现路径都可以完成带WebKit前缀的CSS样式设置，不存在某一种是唯一正确选择的情况，只是操作逻辑、适用场景和注意事项有明确区别。

1. 通过element.style对象赋值 #

这种方式完全可以设置带-webkit-前缀的样式，核心是要匹配CSSStyleDeclaration接口的属性访问规则，有两种合法写法：

• 驼峰命名法：WebKit内核在实现CSSOM规范时，会把所有带-webkit-前缀的CSS属性自动映射为去掉前缀、首字母小写、后续连接单词首字母大写的驼峰属性名，比如要设置-webkit-transform，对应访问element.style.webkitTransform
• 字符串索引法：直接把带原始横杠的CSS属性名作为字符串键访问element.style，比如element.style['-webkit-transform']

示例代码：

const demoEl = document.querySelector('.demo')
// 驼峰写法
demoEl.style.webkitTransform = 'translateX(20px)'
// 字符串键写法，两种效果完全等价
demoEl.style['-webkit-transform'] = 'translateX(20px)'

常见误区：直接用点语法写element.style.-webkit-transform会触发JS语法报错，很多人误以为这是element.style不支持前缀属性，本质是没有匹配正确的属性访问规则，换上面两种合法写法即可正常生效。

2. 通过setAttribute配置style属性 #

这种方式的操作逻辑是直接重写元素的style属性字符串，和直接在HTML标签里写style="-webkit-transform: translateX(20px);"的效果完全一致，只要把带前缀的CSS规则拼进style字符串里，就能正常生效。
示例代码：

const demoEl = document.querySelector('.demo')
// 注意：这种写法会完全覆盖元素原有内联样式
demoEl.setAttribute('style', '-webkit-transform: translateX(20px); color: #333;')

• 对原有样式的影响不同：通过element.style赋值只会修改/新增指定的单个CSS属性，不会冲掉元素上已有的其他内联样式；如果直接用setAttribute覆盖整个style属性，会清空元素之前所有的内联样式，需要手动把原有style值拼接进去才能避免丢失。
• 语法容错不同：通过element.style赋值时，浏览器会自动处理CSS值的类型转换、单位补全等逻辑（比如给数值型宽度值自动补px）；setAttribute是直接写入原生的style字符串，需要手动保证CSS规则的语法完整。

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