看到这样一道微信面试题：用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情况”）也是这个意思吧。让我来写写代码：
计算
安全
数据库
网络和加速
企业服务
/**
* 获取元素自身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 '';
} 经过测试，在通常情况下，以上代码可用。
亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
