当我们通过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种主流内核设置样式)所以下面我们就通过函数来解决这一问题:

 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头的核心部分。

你hack那么多啊,该怎么办的更多相关文章

  1. css常用hack

    原文地址:css常用hack 突然想起今天早上在CNZZ看到的统计数据,使用IE6.7的用户比例还真多,看到之后我的心都碎了.微软都放弃了为毛还有这么多人不死心? 所以说,IE下的兼容还是得做的. – ...

  2. CSS3_01之选择器、Hack

    1.兄弟选择器:①相邻兄弟选择器:元素的后一个兄弟元素,选择器1+选择器2:②通用兄弟选择器:元素后的所有兄弟元素,选择器1~选择器2: 2.属性选择器:attr表示属性名称,elem表示元素名:①[ ...

  3. CSS Hack技术介绍及常用的Hack技巧集锦

    一.什么是CSS Hack? 不同的浏览器对CSS的解析结果是不同的,因此会导致相同的CSS输出的页面效果不同,这就需要CSS Hack来解决浏览器局部的兼容性问题.而这个针对不同的浏览器写不同的CS ...

  4. Medial Queries的另一用法——实现IE hack

    众所周知,有些时候为了实现IE下的某些效果与现代浏览器一致,我们不得不使用一些hack手段来实现目的.比如说使用"\0","\"和"\9"来 ...

  5. CSS Hack

    CSS HACK,网上有很多,主要是IE版本不同造成的,尽量不要用CSS HACK,实在调不过去可以用一用,相信以后随着IE低版本的淘汰,CSS HACK也将不在使用. 类内部HACK IE6识别 - ...

  6. hack

    1.Firefox @-moz-document url-prefix() { .selector { property: value; } }上面是仅仅被Firefox浏览器识别的写法,具体如: @ ...

  7. 浅谈CSS hack(浏览器兼容)

    今天简单写一点关于浏览器兼容的处理方法,虽然百度上已经有很多,但是我还是要写! 先看一个图 这个图描述了2016年1月至8月网民们所使用的浏览器市场份额(来源:http://tongji.baidu. ...

  8. css3复杂选择器+内容生成+Css Hack

    1.复杂选择器2.内容生成3.多列4.CSS Hack(浏览器兼容性)=======================================1.复杂选择器 1.兄弟选择器 1.特点: 1.通过 ...

  9. dedecms功能性函数封装(XSS过滤、编码、浏览器XSS hack、字符操作函数)

    dedecms虽然有诸多漏洞,但不可否认确实是一个很不错的内容管理系统(cms),其他也不乏很多功能实用性的函数,以下就部分列举,持续更新,不作过多说明.使用时需部分修改,你懂的 1.XSS过滤. f ...

  10. CSS hack技巧大全

    ——作者:吴雷君 兼容范围: IE:6.0+,FireFox:2.0+,Opera 10.0+,Sarari 3.0+,Chrome 参考资料: 各游览器常用兼容标记一览表: 标记 IE6 IE7 I ...

随机推荐

  1. 设计一个简单的,低耗的能够区分红酒和白酒的感知器(sensor)

    学习using weka in your javacode 主要学习两个部分的代码:1.过滤数据集 2 使用J48决策树进行分类.下面的例子没有对数据集进行分割,完全使用训练集作为测试集,所以不符合数 ...

  2. 山东省2016acm省赛

    A 水 #include <iostream> #include <cstdio> #include <algorithm> #include <list&g ...

  3. 跟着Android官网学习Activity

    1.Activity介绍 An Activity is an application component that provides a screen with which users can int ...

  4. struts2中的json

    这里放一个转载的struts2中json的详细应用和范例, http://yshjava.iteye.com/blog/1333104,这是个人在网上看到的很用心也很详细的一份关于struts2中js ...

  5. Java远程方法调用(RMI)

    Java RMI 指的是远程方法调用 (Remote Method Invocation).它是一种机制,能够让在某个 Java 虚拟机上的对象调用另一个 Java 虚拟机中的对象上的方法.可以用此方 ...

  6. iOS OC语言: Block底层实现原理 (转载)

    作者:Liwjing 地址:http://www.jianshu.com/users/8df89a9d8380/latest_articles 先来简单介绍一下Block Block是什么? 苹果推荐 ...

  7. 强烈推荐android studio用的几个插件,androidstudio

    不懂安装studio插件,看参考博文:android stuido插件安装:http://blog.csdn.net/liang5630/article/details/46372447 1.Butt ...

  8. Css3 display用法

    display 属性规定元素应该生成的框的类型. display:none   此元素不会被显示 display:block   此元素将显示为块级元素,此元素前后会带有换行符 display:inl ...

  9. mysql服务的启动和停止 net stop mysql net start mysql

    第一招.mysql服务的启动和停止 net stop mysql net start mysql 第二招.登陆mysql 语法如下: mysql -u用户名-p用户密码 键入命令mysql -uroo ...

  10. HDU4279(2012年天津网络赛---数论分析题)

    题目:Number 题意: 给出一个f(x),表示不大于x的正整数里,不整除x且跟x有大于1的公约数的数的个数.定义F(x),为不大于x的正整数里,满足f(x)的值为奇数的数的个数.题目就是求这个F( ...