首页 > web前端 > html教程 > 你hack那么多啊,该怎么办_html/css_WEB-ITnose

你hack那么多啊,该怎么办_html/css_WEB-ITnose

WBOY
发布: 2016-06-24 11:40:03
原创
1112 人浏览过

当我们通过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) { 2             //利用for-in循环遍历attr里面的属性 3             for (var i in attr){ 4                 var newi = i; 5                 //遍历是不是有- 6                 if(newi.indexOf("-")>0) { 7                     var num = newi.indexOf("-"); 8                     newi = newi.replace(newi.substr(num,2),newi.substr(num+1,1).toUpperCase()); 9                 }10                 //常规的设置属性的方式11                 ele.style[newi] = attr[i];12                 newi = newi.replace(newi.charAt(0),newi.charAt(0).toUpperCase());13                 ele.style["webkit" + newi] = attr[i];14                 ele.style["moz" + newi] = attr[i];15                 ele.style["ms" + newi] = attr[i];16                 ele.style["o" + newi] = attr[i];17             }18         }
登录后复制

函数说明:setHack函数有两个参数:ele代表的是你要为哪个元素设置属性,attr是一个json格式,包含了你所设置的属性和属性值,比如{"transform":"rotate(20deg)","transform-origin":"120px 120px"}。代码中的if判断主要是将属性中含有”-“变成大写字母的格式。后面则主要是加Hack头的核心部分。

来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板