当我们通过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. microsoft的罗马帝国——浪潮之巅

    其实开始读微软的这篇已经比较久了,从来学校的前一天晚上等车的时候就开始读了,直到今天才看完.嗯,微软的确是个帝国. 那就从头开始讲把,关于帝国的传奇都是比较长的故事呢.至于我的叙述水平和我的知识水平都 ...

  2. lua协程实现简析

    协程,简单来说就是新创建一个协助程序(co = coroutine.create(func)),然后需要手动去启动它(coroutine.resume(co)),在它最终退出之前,它有可能暂停多次返回 ...

  3. 【组队训练】2015-2016 ACM-ICPC, NEERC, Southern Subregional Contest

    好多oj都崩掉了,于是打了cf.. 开始开的最后一题...尼玛题好长终于看完了...神题不会.... I过了好多人..看了下,一眼题...随便敲了下,1A ]; int main(){ int n, ...

  4. [iOS基础控件 - 5.4] 广告分页代码(UIScrollView制作)

    A.概念 例子就是桌面的APP列表,当APP数量超过一个屏幕,自动进行分页   B.实现思路 1.创建一个UIScrollView,这里设置为宽度跟屏幕相同,高度1/4屏幕高度左右 2.使用代码在UI ...

  5. .NET 基础 一步步 一幕幕[面向对象之静态、非静态]

    静态.非静态 先来看一段代码来区分静态与非静态: using System; using System.Collections.Generic; using System.Linq; using Sy ...

  6. 【UNIX】select、poll、epoll学习

    三者都是UNIX下多路复用的内核接口,select是跨平台的接口,poll是systemV标准,epoll是linux专有的接口,基于poll改造而成. select 函数原型: int select ...

  7. jboss 7部署cas3.4.11

    国内私募机构九鼎控股打造APP,来就送 20元现金领取地址:http://jdb.jiudingcapital.com/phone.html内部邀请码:C8E245J (不写邀请码,没有现金送)国内私 ...

  8. [Arduino+Android] 自制土砲智能安全帽

    专案动机(1/2) .现今社会中,各种交通运输载具方便了人类的生活,缩小了地域的差异性,当中车辆是人们日常生活中最频繁接触到的一部分. .车辆使人们的行动更加便利,也因此道路上行驶的车辆越来越多. . ...

  9. git reset and git checkout

    git reset --hard <commit>: 1.替换引用的指向.引用指向新的提交ID; 2.替换暂存区.替换后,暂存区的内容和引用指向的文件夹树一致; 3.替换工作区.替换后,工 ...

  10. protocol buffer的简单使用

    protocol buffer是一个高效的结构化数据存储格式,用来结构化数据的序列化与反序列化.目前支持java.c++.Python 相对于json而言: 数据量跟小 其他的还没看出什么优势 下载地 ...