你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 ...
随机推荐
- 2014-02-27WPF学习笔记
//StackPanel布局 //创建时间:11:33 页面布局:Orientation默认纵向:Vertical水平为:Horizontal <Button> <Button.Co ...
- HW6.28
import java.util.Scanner; public class Solution { public static void main(String[] args) { Scanner i ...
- 流(stream)
流的概念 Java程序通过流来完成输入/输出.流是生产或消费信息的抽象.流通过Java的输入/输出系统与物理设备链接.尽管与它们链接的物理设备不尽相同,所有流的行为具有同样的方式.这样,相同的输入/输 ...
- [学姿势]实验室搬砖+node学习
这周开始进行收尾工作,我当然没有进行核心技术的开发,主要负责的是对web端进行展示上的修修补补,主要包括添加VLC播放器.rtsp视频流以及一些js细节. 1.VLC 全称为Video Lan Cli ...
- hdfs里的文件下载HDFS之fsimage、metadata、edits、fstime(二十七)
首先,要有这个观念,元数据信息(fsimage + editslog). fsimage是在磁盘 metadata是在内存 ********************fsimage把内存的,序列化到磁盘 ...
- iOS开发核心语言Objective C —— 所有知识点总结
C和OC对比 OC中主要开发在什么平台上的应用程序?答:可以使用OC开发Mac OS X平台和iOS平台的应用程序 OC中新增关键字大部分是以什么开头?答:OC中新增关键字大部分是以@开头 OC中新增 ...
- sql语句常见错误
1.两张表关联用的三种连接: left join .right join .inner join区别 (备注:两个表链接肯定是根据两个表(如A B)中的两个字段值(如A.bId和B.id),相等就行 ...
- C#操作sql通用类 SQLHelper
Codeusing System; using System.Data; using System.Configuration; using System.Web; using System.Web. ...
- MySQL的安装——源码方式(实验环境下测试用,真实环境请忽略此文)
#虚拟机是最初的的系统,我们在虚拟机里安装scp [root@serv01 ~]# yum install /usr/bin/scp -y #安装过程略 #我们拷贝MySQL的源码包到目标机的/roo ...
- ubuntu安装mysql后不能远程访问的方法
ubuntu安装mysql后不能远程访问的方法1.mysql>GRANT ALL PRIVILEGES ON *.* TO 'myuser'@'%' IDENTIFIED BY 'mypassw ...