├── README.md
├── cssControl.1.0.0.js
└── demo
└── demo.html
/README.md:
--------------------------------------------------------------------------------
1 | ## 原生JS实现CSS样式的get与set，兼容主流浏览器与 IE678
2 |
3 | ### 初始化方法
4 | ###### 1) 提供 var cc = new CC() 构造函数，构建 cssControl 实例，然后 cc.getStyle(elem, style) 调用
5 | ###### 2) 或者直接 CC().getStyle(elem, style) 进行调用
6 |
7 | ### 核心方法
8 | ###### 1) getStyle(elem, style) -- 用于获取结点为 elem 的 style 样式
9 | ###### 2) setStyle(elem, style, value) -- 用于设置结点为 elem 的 style 样式为 value
10 |
11 | ## 博客园相关blog
12 | [【CSS进阶】原生JS getComputedStyle等方法解析](http://www.cnblogs.com/coco1s/p/5210667.html)
13 |
14 |
15 |
--------------------------------------------------------------------------------
/cssControl.1.0.0.js:
--------------------------------------------------------------------------------
1 | /**
2 | * @author Coco
3 | * QQ : 308695699
4 | * @name cssControl 1.0.0
5 | * @description 原生 JS 实现 CSS 样式的 get 与 set，兼容主流浏览器与 IE678
6 | * -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
7 | * 1、使用原生 JS 实现 CSS 样式的 get 与 set
8 | *
9 | * 2、初始化方法，
10 | * 1）提供 var cc = new CC() 构造函数，构建 cssControl 实例，然后 cc.getStyle(elem, style) 调用
11 | * 2）也可以不使用 new 运算符将 cssControl 实例化 var cc = CC(); 然后 cc.getStyle(elem, style) 调用
12 | * 3）或者直接 CC().getStyle(elem, style) 进行调用
13 | *
14 | * 3、核心方法
15 | * getStyle(elem, style) -- 用于获取结点为 elem 的 style 样式
16 | * setStyle(elem, style, value) -- 用于设置结点为 elem 的 style 样式为 value
17 | *
18 | */
19 | ;
20 | (function(window, undefined) {
21 |
22 | var
23 | doc = document,
24 | win = window,
25 | cssControl = function() {
26 | return new cssControl.prototype.init();
27 | }
28 |
29 | // IE 下获取透明度
30 | function getIEOpacity(elem) {
31 | var filter = null;
32 |
33 | // 早期的 IE 中要设置透明度有两个方法：
34 | // 1、alpha(opacity=0)
35 | // 2、filter:progid:DXImageTransform.Microsoft.gradient( GradientType= 0 , startColorstr = ‘#ccccc’, endColorstr = ‘#ddddd’ );
36 | // 利用正则匹配，注意 ?: 的用法
37 | filter = elem.style.filter.match(/(?:progid:[\w.]+.)?alpha\((?:[^,]+,)?\s*opacity=(\d+)\s*\)/i) || elem.style.filter.match(/alpha\(opacity=(.*)\)/i);
38 |
39 | if (filter) {
40 | var value = parseFloat(filter);
41 | if (!isNaN(value)) {
42 | // 转化为标准结果
43 | return value ? value / 100 : 0;
44 | }
45 | }
46 | // 默认返回 1
47 | return 1;
48 | }
49 |
50 | // IE 下将 CSS 命名转换为驼峰表示法
51 | // background-color --> backgroundColor
52 | // 利用正则处理一下就可以了
53 | function camelize(attr) {
54 | // /\-(\w)/g 正则内的 (\w) 是一个捕获，对应后面 function 的 letter
55 | // 意思是将 匹配到的 -x 结构的 x 转换为大写的 X (x 这里代表任意字母)
56 | return attr.replace(/\-(\w)/g, function(all, letter) {
57 | return letter.toUpperCase();
58 | });
59 | }
60 |
61 | cssControl.prototype = {
62 | init: function() {
63 | return this;
64 | },
65 | // 获取样式
66 | getStyle: function(elem, style) {
67 | // 主流浏览器
68 | if (win.getComputedStyle) {
69 | // 获取 float 属性使用 cssFloat
70 | // 测试最新版的浏览器，使用 cssFloat 已经获取不到 float 了，直接使用下面的通用语法
71 | // if(style === "float"){
72 | // return win.getComputedStyle(elem, null).getPropertyValue("cssFloat");
73 | // }
74 | return win.getComputedStyle(elem, null).getPropertyValue(style);
75 |
76 | // 不支持 getComputedStyle
77 | } else {
78 | // IE 下获取透明度
79 | if (style == "opacity") {
80 | getIEOpacity(elem);
81 |
82 | // IE687 下获取浮动使用 styleFloat
83 | } else if (style == "float") {
84 | return elem.currentStyle.getAttribute("styleFloat");
85 |
86 | // 未设置元素的高宽，获取的值是 auto
87 | // 这里要获取精确的 px 值，使用 elem.getBoundingClientRect 进行 hack
88 | // 跨浏览器的方法 getBoundingClientRect 可以获得元素四个点相对于文档视图左上角的值 top、left、bottom、right ，通过计算就可以容易地获得准确的元素大小
89 | } else if ((style == "width" || style == "height") && (elem.currentStyle[style] == "auto")) {
90 | var clientRect = elem.getBoundingClientRect();
91 |
92 | // 加上 px ，转化为标准输出
93 | return (style == "width" ? clientRect.right - clientRect.left : clientRect.bottom - clientRect.top) + "px";
94 | }
95 |
96 | // 其他样式，无需特殊处理
97 | return elem.currentStyle.getAttribute(camelize(style));
98 | }
99 | },
100 | // 设置样式
101 | setStyle: function(elem, style, value) {
102 | // 如果是设置 opacity ，需要特殊处理
103 | if (style == "opacity") {
104 |
105 | //IE7 bug:filter 滤镜要求 hasLayout=true 方可执行（否则没有效果）
106 | if (!elem.currentStyle || !elem.currentStyle.hasLayout) {
107 | // 设置 hasLayout=true 的一种方法
108 | elem.style.zoom = 1;
109 | }
110 | // IE678 设置透明度叫 filter ，不是 opacity
111 | style = "filter";
112 |
113 | // !!转换为 boolean 类型进行判断
114 | if (!!window.XDomainRequest) {
115 | value = "progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=" + value * 100 + ")";
116 | } else {
117 | value = "alpha(opacity=" + value * 100 + ")"
118 | }
119 | }
120 |
121 | // 通用方法
122 | elem.style.cssText += ';' + (style + ":" + value);
123 | }
124 | }
125 |
126 | cssControl.prototype.init.prototype = cssControl.prototype;
127 |
128 | // 暴露接口
129 | window.CC = cssControl;
130 |
131 | })(window);
132 |
--------------------------------------------------------------------------------
/demo/demo.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | css control demo
5 |
6 |
7 | Test
8 |
9 |
10 |
--------------------------------------------------------------------------------