你hack那么多啊,该怎么办
当我们通过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那么多啊,该怎么办的更多相关文章
- css常用hack
原文地址:css常用hack 突然想起今天早上在CNZZ看到的统计数据,使用IE6.7的用户比例还真多,看到之后我的心都碎了.微软都放弃了为毛还有这么多人不死心? 所以说,IE下的兼容还是得做的. – ...
- CSS3_01之选择器、Hack
1.兄弟选择器:①相邻兄弟选择器:元素的后一个兄弟元素,选择器1+选择器2:②通用兄弟选择器:元素后的所有兄弟元素,选择器1~选择器2: 2.属性选择器:attr表示属性名称,elem表示元素名:①[ ...
- CSS Hack技术介绍及常用的Hack技巧集锦
一.什么是CSS Hack? 不同的浏览器对CSS的解析结果是不同的,因此会导致相同的CSS输出的页面效果不同,这就需要CSS Hack来解决浏览器局部的兼容性问题.而这个针对不同的浏览器写不同的CS ...
- Medial Queries的另一用法——实现IE hack
众所周知,有些时候为了实现IE下的某些效果与现代浏览器一致,我们不得不使用一些hack手段来实现目的.比如说使用"\0","\"和"\9"来 ...
- CSS Hack
CSS HACK,网上有很多,主要是IE版本不同造成的,尽量不要用CSS HACK,实在调不过去可以用一用,相信以后随着IE低版本的淘汰,CSS HACK也将不在使用. 类内部HACK IE6识别 - ...
- hack
1.Firefox @-moz-document url-prefix() { .selector { property: value; } }上面是仅仅被Firefox浏览器识别的写法,具体如: @ ...
- 浅谈CSS hack(浏览器兼容)
今天简单写一点关于浏览器兼容的处理方法,虽然百度上已经有很多,但是我还是要写! 先看一个图 这个图描述了2016年1月至8月网民们所使用的浏览器市场份额(来源:http://tongji.baidu. ...
- css3复杂选择器+内容生成+Css Hack
1.复杂选择器2.内容生成3.多列4.CSS Hack(浏览器兼容性)=======================================1.复杂选择器 1.兄弟选择器 1.特点: 1.通过 ...
- dedecms功能性函数封装(XSS过滤、编码、浏览器XSS hack、字符操作函数)
dedecms虽然有诸多漏洞,但不可否认确实是一个很不错的内容管理系统(cms),其他也不乏很多功能实用性的函数,以下就部分列举,持续更新,不作过多说明.使用时需部分修改,你懂的 1.XSS过滤. f ...
- CSS hack技巧大全
——作者:吴雷君 兼容范围: IE:6.0+,FireFox:2.0+,Opera 10.0+,Sarari 3.0+,Chrome 参考资料: 各游览器常用兼容标记一览表: 标记 IE6 IE7 I ...
随机推荐
- html中a标签中的onclick和href的使用
1. 链接的 onclick 事件被先执行,其次是 href 属性下的动作(页面跳转,或 javascript 伪链接): 假设链接中同时存在 href 与 onclick,如果想让 href 属性下 ...
- HW5.27
public class Solution { public static void main(String[] args) { int totalCount = 0; int lineCount = ...
- Arrays.asList的源码分析
以前一直很奇怪为什么Arrays.asList的数组不能插入新的数据,后来看了源码发现是因为内部是一个final的数组支持起来的Arraylist,下面贴入源码与分析. 1.先看Arrays的方法 我 ...
- 依賴注入入門——Unity(一)
參考資料http://blog.csdn.net/m13666368773/article/details/7802126 背景介紹 在设计模式中,尤其是结构型模式很多时候解决的就是对象间的依赖关系, ...
- sublime Text 3的默认快捷键大全
Ctrl+M 光标跳至对应的括号 Alt+. 闭合当前标签 Ctrl+Shift+A 选择光标位置父标签对儿 Ctrl+Shift+[ 折叠代码 Ctrl+Shift+] 展开代码 Ctrl+KT 折 ...
- C#公历转农历算法
C#公历转农历算法,高手们也可以改写一下让其更加有效率! Code/// <summary> /// LunDay 的摘要说明. /// 用法说明 /// 直接调用即可,比较简单 /// ...
- UIView中触摸事件touchBegin
UIView触摸事件touchBegin 等一系列方法 1)手指按下 - (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event; ...
- SCO连接SCOM报警
当SCOM中出现红色警报时,在目标计算机上运行一个程序: 1.新建Runbook,添加一个Monitor Alert 2.设置Monitor Alert属性,选择connection,设置警报过滤条件 ...
- C#-设置label的字体颜色和大小
在进行label的设置的过程中,常常会遇到需要设定label的字体颜色和字体的大小,这就需要用到label的属性:
- [RxJS] ReplaySubject
A ReplaySubject caches its values and re-emits them to any Observer that subscrubes late to it. Unli ...