配图源自 Freepik
我们知道，通过原生 JS 脚本动态设置内联样式的方式有：
<!-- 省略一万行代码... -->
<style>
@keyframes slidein {
from {
transform: scaleX(0);
}
to {
transform: scaleX(1);
}
}
</style>
<div id="app">关关雎鸠，在河之洲...</div>
const element = document.getElementById('app')
// 1️⃣ 方式一（泛指一类，下同）
element.style.fontSize = '30px'
// 2️⃣ 方式二
element.style.setProperty('font-size', '30px')
// 3️⃣ 方式三（请注意，这可能会抹掉其他 CSS 属性的哦）
element.style.cssText = 'color: 30px'
element.setAttribute('style', 'color: 30px')
但是，这里面有一些限制在里面...
- 方式一：无法设置权重
!important，若带上权重，其属性值也不会生效。- 方式二：无法设置带
-webkit-、-moz-、-o-、-ms-等各浏览器厂商实验性或非标准的 CSS 属性，如-webkit-animation。- 方式三：可以处理以上两种方式无法实现的功能。另外，要获取内联样式中某个 CSS 属性是否含有
!important权重，也需借助element.style.cssText方可获取。
验证
方式一
// 对比一
element.style.fontSize = '30px' // 有效
element.style.fontSize = '50px !important' // 无效，除了不会设置权重之外，50px 也不会生效哦。
// 对比二
// 假设 element 元素本身就含有 font-size: 30px !important 的内联样式
element.style.fontSize // 输出 "30px"，注意是不含权重的
element.style.fontSize = '50px' // 这是有效的，同时权重也会丢失
element.style.fontSize = '50px !important' // 无效
// 对比三
element.style.animation = '3s slidein' // 有效
element.style.webkitAnimation = '3s slidein' // 有效，但是最终会变成 animation: "3s slidein"，而不是 -webkit-animation: "3s slidein"
element.style.MozAnimation = '3s slidein' // 有效，但同上
小结：
- 通过
element.style.fontSize这一类形式读写内联样式时，都无法读取或写入权重，而且需要注意的是element.style.fontSize = '30 !important'并不会被写入哦。 - 通过
element.style.webkitAnimation = '3s slidein'或element.style.MozAnimation = '3s slidein'形式写入包含浏览器厂商特性的 CSS 属性时，将会被处理成标准的 CSS 属性。例如：-webkit-animation变为animation，跟预期结果是有出入的。 - 另外，请注意写法。标准 CSS 属性是小驼峰形式，而带浏览器厂商特性的 CSS 属性，则可能不是小驼峰命名规则。例如：
webkitXxx、MozXxx首字母大小写就不一样。
请注意，以上示例仅列举了个别属性，但其实是泛指同一类。
方式二
// 对比一
element.style.setProperty('font-size', '30px') // 有效
element.style.setProperty('font-size', '30px', 'important') // 有效（可设置权重，但请注意是不含 ! 的）
// 对比二
element.style.setProperty('-webkit-animation', '3s slidein') // 有效，可会变为 animation。同方式一
element.style.setProperty('-moz-animation', '3s slidein') // 有效，可会变为 animation。同方式一
小结：
- 可通过
CSSStyleDeclaration.setProperty(propertyName, value, priority)方法，并传递important（请注意是不含!的） 给priority参数，来设置 CSS 优先级。
方式三
这种方式，除了可以实现以上功能之外，最重要的是，它可以设置 -webkit-、-moz-、-o-、-ms- 等实验性或非标准的 CSS 属性。
element.style.cssText = 'font-size: 30px; -webkit-animation: 3s slidein' // 有效
element.setAttribute('style', 'font-size: 30px; -webkit-animation: 3s slidein') // 有效
⚠️ 尽管以上两种方式都能实现，但注意可能会抹掉当前元素的其他 CSS 属性，可利用类型以下的方式处理。
const { cssText } = element.style
element.style.cssText = `${cssText} font-size: 30px; color: #f00`
2023-03-21 更新
上述方式三中通过 element.style.cssText 方式设置带有 -webkit 等样式时，其前缀可能会被抹除。举个例子：
element.style.cssText = '-webkit-user-select: none'
在 Safari 16.3 中，可按预期设置 -webkit-user-select: none，而在 Chrome 111、Firefox 112 则会被处理成 user-select: none。
目前比较安全的做法如下：
element.setAttribute('style', '-webkit-user-select: none')
References
The end.
