平时很少用到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
64
function 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%,这样格式的数值。

本文地址 https://laoona.com/post/e506bb96.html