你hack那么多啊，该怎么办
摘要：当我们通过javascript来操作css样式的时候，假如我们停留在css2的阶段，会发现操作起来并不是很困难。虽然存在一些浏览器兼容的问题，但我们通过封装自己的函数，不仅可以设置样式还能够获取样式。但是，假如javascript碰到了css3会是什么样的情况呢？我们知道，虽然css3目前出现在各个...
当我们通过javascript来操作css样式的时候，假如我们停留在css2的阶段，会发现操作起来并不是很困难。虽然存在一些浏览器兼容的问题，但我们通过封装自己的函数，不仅可以设置样式还能够获取样式。但是，假如javascript碰到了css3会是什么样的情况呢？
我们知道，虽然css3目前出现在各个浏览器中，但是还没有当成一套规范正式发行。所以各个浏览器对于css3的属性支持情况不一。因此就出现了“css Hack”一说。很好，为什么？因为通过css Hack我们就可以在css的层次上兼容各个浏览器，不需要借用javascript来实现。但是五大浏览器有自己的Hack头（safari和chrome为：webkit。ie为：ms。opera为：o。火狐为：moz）。这也造成了一定程度上代码的冗余。而且我们在通过js来控制css3属性的时候，又有问题出现了。
这次出现的问题不是很难，归根结底就是代码冗余的问题（因为我们要分别对4种主流内核设置样式）所以下面我们就通过函数来解决这一问题：
1 function setHack(ele,attr) {
//利用for-in循环遍历attr里面的属性
for (var i in attr){
var newi = i;
//遍历是不是有-
if(newi.indexOf("-")>0) {
var num = newi.indexOf("-");
newi = newi.replace(newi.substr(num,2),newi.substr(num+1,1).toUpperCase());
}
//常规的设置属性的方式
ele.style[newi] = attr[i];
newi = newi.replace(newi.charAt(0),newi.charAt(0).toUpperCase());
ele.style["webkit" + newi] = attr[i];
ele.style["moz" + newi] = attr[i];
ele.style["ms" + newi] = attr[i];
ele.style["o" + newi] = attr[i];
}
}
函数说明：setHack函数有两个参数：ele代表的是你要为哪个元素设置属性，attr是一个json格式，包含了你所设置的属性和属性值，比如{"transform":"rotate(20deg)","transform-origin":"120px 120px"}。代码中的if判断主要是将属性中含有”-“变成大写字母的格式。后面则主要是加Hack头的核心部分。
相关文章
最新发布
阅读排行
热门文章
猜你喜欢