看到这样一道微信面试题：用JS代码求出页面上一个元素的最终的background-color，不考虑IE浏览器，不考虑元素float情况。（2017.3.1补充：赛赛同学提醒了我，还要考虑background这个复合属性，情况变得异常复杂了，以下代码是之前的，没有考虑。)
由于element.style.cssText只能访问到元素内联样式即标签style属性，只能用document.defaultView.getComputedStyle，考虑IE的话可用element.currentStyle，不过element.currentStyle无法用于伪元素而document.defaultView.getComputedStyle可以。如果要考虑元素不可见或者没有设定值的时候，backgroundColor的表现可以认为是其父元素的表现（题目的“不考虑元素float情况”）也是这个意思吧。让我来写写代码：
|
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
|
/**
* 获取元素自身css属性
* @param elem 元素
* @param property 属性名（这里不考虑float）
* @returns {string} css属性值
*/
function
computedStyle(elem, property) {
if
(!elem || !property) {
return
''
;
}
var
style =
''
;
if
(elem.currentStyle) {
style = elem.currentStyle[camelize(property)];
}
else
if
(document.defaultView.getComputedStyle) {
style = document.defaultView.getComputedStyle(elem,
null
).getPropertyValue(property);
}
return
style;
}
/**
* 将-连接属性名转换为驼峰命名形式
* @param {string} str -连接字符串
* @returns {string} 驼峰命名字符串
*/
function
camelize(str) {
return
str.replace(/-(\w)/g,
function
(s, p1) {
return
p1.toUpperCase();
});
}
/**
* 在elem获取的背景色是否为最终的背景色
* @param elem
* @returns {boolean}
*/
function
isFinalBGColor(elem) {
var
bgc = computedStyle(elem,
'background-color'
);
return
(!!bgc) && (bgc !==
'transparent'
) && (bgc !==
'rgba(0, 0, 0, 0)'
) && (computedStyle(elem,
'opacity'
) !==
'0'
) && (computedStyle(elem,
'visibility'
) !==
'hidden'
) && (computedStyle(elem,
'display'
) !==
'none'
);
}
/**
* 获得元素最终的背景色（不考虑半透明叠加颜色的情况）
* @param elem
* @returns {string}
*/
function
getFinalBGColor(elem) {
if
(isFinalBGColor(elem)){
return
computedStyle(elem,
'background-color'
);
}
else
if
(elem!==document.documentElement) {
return
getFinalBGColor(elem.parentNode);
}
return
''
;
}
|
经过测试，在通常情况下，以上代码可用。
本文转自 iampomelo 51CTO博客，原文链接：http://blog.51cto.com/iampomelo/1901241，如需转载请自行联系原作者
