动态设置 CSS 样式时，如何写入各浏览器兼容性样式？

Question

我们知道，通过原生 JS 脚本动态设置内联样式的方式有：

<!-- 省略一万行代码... -->
<style>
  @keyframes slidein {
    from {
      transform: scaleX(0);
    }
    to {
      transform: scaleX(1);
    }
  }
</style>

<div>关关雎鸠，在河之洲...</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`

上述方式三中通过 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

• Why doesn't style.webKitTransition and style.webkitTransform work anymore in Chrome?