js 获取元素background各种属性值
平时很少用到js background属性，今天因项目需求，遭遇了background属性，查了文档，兼容性又是一大坑，整理之后，码了个方法，方便js 获取元素background各种属性值。
一、首先是backgound属性，只有chrome和safari,返回了background的全部属性值，连firefox都返回空啊！
二、backgroundColor属性： chrome/safari/firfox返回了rgb格式的颜色值，ie均是十六进制加#的颜色值。
三、backgroundAttachment、backgroundRepeat各个浏览器返回值终于都是统一的了。
四、backgroundImage属性，返回背景图片的绝对路径，不同的是：除了chrome/safari下url值是不带引号的，其它浏览器均带双引号。
五、最蛋疼的就是backgroundPosiiton、backgroundPosiitonY属性了
A、如果有内联样式通过elem.style.backgroundPosition可以取得backgroundPositionX和backgroundPositionY两个值。
B、但是如果没有内联样式通过计算样式getComputedStyle(elem,null).backgroundPosition得到的总是返回IE下的backgroundPositionX的值，我还没有找到通过getComputedStyle(elem,null)方法得到backgroundPositionY的值得方法，等到找到了再添上来。
具体区别如下：
1.IE6/7/8：识别backgroundPositionX/Y ,但是不识别backgroundPosition,ie9+两者都识别，但css如：background-postion:center,只指定一个值，ie9+,background就返回一个值，其它浏览器都会返回两个值。
2.FireFox和opera：不识别backgroundPositionX/Y,但是识别backgroundPosition。
3.Safari和Chrome：识别backgroundPositionX/Y及backgroundPosition。
下面就来准备填坑吧！代码先贴上：1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64function getBackground(ele) {
var background = {
pos: {
x: "",
y: ""
},
image: getStyle(ele, "backgroundImage").replace(/^url\("?|"?\)$/gi, ""),
repeat: getStyle(ele, "backgroundRepeat"),
color: getStyle(ele, "backgroundColor"),
attachment: getStyle(ele, "backgroundAttachment")
}
if (ele.currentStyle) {
background.pos.x = ele.currentStyle.backgroundPositionX;
background.pos.y = ele.currentStyle.backgroundPositionY;
} else {
var pos_arr = window.getComputedStyle(ele, null).backgroundPosition.split(" ");
background.pos.x = window.getComputedStyle(ele, null).backgroundPositionX;
background.pos.y = window.getComputedStyle(ele, null).backgroundPositionY;
background.pos.x = background.pos.x ? background.pos.x: pos_arr[0];
background.pos.y = background.pos.y ? background.pos.y: pos_arr[1];
}
function formatNumber(value) {
var value_num = "";
switch (value) {
case "left":
case "top":
case "0%":
value_num = "0%";
break;
case "right":
case "bottom":
case "100%":
value_num = "100%";
break;
case "center":
case "50%":
value_num = "50%";
break;
default:
value_num = value;
break;
}
return value_num;
}
background.pos.x = formatNumber(background.pos.x);
background.pos.y = formatNumber(background.pos.y);
return background;
}
getStyle是平时常用的获取元素计算后的css属性兼容性方法，这里就不再赘述了。
getBackground()返回一个对象，formatNumber()方法是格式化left,top,center,right,bottom这些英文值，返回来0%，50%，100%，这样格式的数值。