前言
我们知道，通过原生 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.setProperty('style', 'font-size: 30px; -webkit-animation: 3s slidein') // 有效
⚠️ 尽管以上两种方式都能实现，但注意可能会抹掉当前元素的其他 CSS 属性，可利用类型以下的方式处理。
const { cssText } = element.style element.style.cssText = `${cssText} font-size: 30px; color: #f00`
References
The end.
