[javascript]用js修正浏览器私有属性

最新推荐文章于 2025-09-08 17:59:21 发布

weixin_30443747

最新推荐文章于 2025-09-08 17:59:21 发布

阅读量61

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/enix/archive/2012/05/27/2520490.html

本文介绍了一种简化CSS私有属性处理的方法，通过封装一个函数，可以轻松地为各种浏览器添加前缀，减少代码重复，并提供一个方便的API用于设置样式。此外，还讨论了在不同浏览器中遇到的问题以及解决策略。

目前有很多css属性都是私有方式实现的，想用就要加一堆破前缀，-moz-,-ms-,-o-,-webkit-;如果在样式表里改一个值就需要从新把所由的都改一遍非常麻烦。

或者用dom style去设置一个元素的style也非常麻烦，大部分都是驼峰式的，firefox是个另类，MozTransition要处理成这样的，不管用正则还是别的方式都不是很好处理。

小的简单封装了一个方法，用起来还不错。

用dom style的cssText直接注入或者，调用后拷贝到样式表都比较方便。

fixCSS('transition','all .8s ease-in 1s');
function fixCSS(a,p){
     return  '-moz-#:@;-ms-#:@;-o-#:@;-webkit-#:@;#:@;'.replace(/#:@/g,a+':'+p);
}

调用这个方法后会返回这样的字符串　　

"-moz-transition:all .8s ease-in 1s;-ms-transition:all .8s ease-in 1s;-o-transition:all .8s ease-in 1s;-webkit-transition:all .8s ease-in 1s;transition:all .8s ease-in 1s;"

用cssText设置后，浏览器只会识别自己私有的那部分代码，其他会忽略掉，所以还是比较理想的。如果要修改样式表就更方便了，拷贝粘贴足以。

不过opera有个问题，他会把所有的字符串赋值给style，但是功能并没有影响。

另外要注意的是：

cssText属性，会重写style的所有值。

关于css私有属性的处理大家还有更好的思路，可以告知小的，感激不尽！

ps：css已经进入css4时代了，mediaquery被纳入规范。

转载于:https://www.cnblogs.com/enix/archive/2012/05/27/2520490.html