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

前言

我们知道 通过原生 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

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

The end.

前端祖传三件套CSS的常见属性和设置 CSS是前端开发中最核心的技术之一，它可以通过样式定义来控制页面元素的外观和布局。在这篇文章中，我们将介绍CSS的常见属性和设置，在你编写CSS时能够更加熟练地使用这些属性。
宜搭子表单的css设置 可以通过css的方式修改宜搭子表单的字体，行高，行间距等，仅提供个人操作供参考，具体情况请亲自测试再评价测试
零基础CSS入门教程(8)——CSS设置字体 我们前几个小结学习了，css的选择器，和及基本的改变字体颜色。我们这一小结学习一下设置字体的一些功能(1)font-size这个是设置字体大小，浏览器一般默认字体是16px (2)font-weight 这个是字体加粗和html字体加粗一样效果正常是400或写normal 加粗值是700或写bold (3)font-style是设置字体倾斜和html字体倾斜一样效果，倾斜写italic，不倾斜写normal (4)font-family可以设置字体形式 在后面加sans-serif是无衬线字体写这个墓地为了