获取元素的最终background-color

一、题目

用JS代码求出页面上一个元素的最终的background-color，不考虑IE浏览器，不考虑元素float情况。（这道题copy自网上）

二、题目解析

1.考察底层JavaScript基础
 前端开发，日常最常接触的就是页面样式的编写。而摆脱jQuery等工具库，用原生js获取样式，是每个前端程序猿进阶阶段必须掌握的技能。

2.考察面试者的思维缜密程度和开发经验
 如果认为单单求元素计算后的样式，就有点too young了。页面的样式的复杂，永远是最虐心的。就算前端有多牛逼，一听到兼容IE6，论谁都会心塞😓。所以还要考虑特殊的情况：display，opacity，visibility的取值。

三、理论基础

1. 内联样式
 内联样式可以通过元素的style属性获取，如果style属性有background-color值，则可以直接获取出来 (暂不考虑!important) 。

2. 外联的层叠样式
 DOM2样式规范在document.defaultView中包含了一个getComputedStyle()方法。该方法返回一个只读的CSSStyleDeclaration对象，其中包含特定元素的所有计算样式。

四、解题

4.1 将所有工具方法封装在WDS(wall dom script)命名空间中

(function(WDS, undefined){
  // 封装代码...
})(window.WDS || (window.WDS = {}));

代码封装在命名空间里，不会造成无意间的代码污染。

4.2 工具方法camelize

// 字符串转换为驼峰写法
function camelize(str) {
    return str.replace(/-(\w)/g, function (strMatch, p1){
        return p1.toUpperCase();
    });
}

该方法是为了方便后续getStyle()方法的编写，而独立出来的。
 作用是将连字符类的css属性值，转换成驼峰写法。
 例如：将background-color转换为backgroundColor

4.3 获取特定元素的计算样式

// 获取元素计算后的样式
function getStyle(elem, property){
    if(!elem || !property){
        return false;
    }

    var value = elem.style[camelize(property)], // 先获取是否有内联样式
        css; // 获取的所有计算样式

    // 无内联样式，则获取层叠样式表计算后的样式
    if(!value){
        if(document.defaultView && document.defaultView.getComputedStyle){
            css = document.defaultView.getComputedStyle(elem, null);
            value = css ? css.getPropertyValue(property) : null;
        }
    }

    return value;
}

做到这一步，第一个考察点基本就满足了。也能获知面试者是否具备足够扎实的js基础。
 另外，像安全保护性的判断if(!elem || !property)和功能嗅探if(document.defaultView && document.defaultView.getComputedStyle)，都能很好地体现开发者的代码逻辑和开发经验。

4.4 排除特殊情况

// 检测获取的背景色是否有效
function checkBgValue(elem){
    var value = getStyle(elem, 'background-color'),
        hasColor = value ? true : false; // 是否有颜色

    // 排除特殊情况
    if(value == "transparent" || value == "rgba(0, 0, 0, 0)"){
        // 未设置background-color，或者设置为跟随父节点
        hasColor = false;
    }else if(getStyle(elem, 'opacity') == "0"){
        // dom节点透明度为全透明
        hasColor = false;
    }else if(getStyle(elem, 'visibility') == "hidden"){
        // dom节点不可见
        hasColor = false;
    }else if(getStyle(elem, 'display') == "none"){
        // dom节点不可见
        hasColor = false;
    }

    return hasColor;
}

4.5 获取div在页面最终显示的颜色

// 获取div最终显示的颜色
function getRealBg(elem){
    if(checkBgValue(elem)){
        return getStyle(elem, 'background-color');
    }else if(elem != document.documentElement){
        return getRealBg(elem.parentNode);
    }

    return '';
}

获取样式值采用递归方式处理。
 如果能顺利获取到元素样式，且不触发4.4 排除特殊情况中的一种，则直接返回结果。
 触发了特殊情况，则需要查找父节点以及更上层的节点的样式，来获取肉眼能看到，显示在页面上的background-color值。
 在向上回溯的过程中，如果已经回溯到html根节点，则可以停止回溯。所以加了判断else if(elem != document.documentElement)

五、遗漏的大boss

5.1 大boss !important
 如果乱用 !important，对大型项目的维护和开发，绝对是一场噩梦。因为优先级规则的计算，!important永远处在食物链的最顶层。
 当前题目不考虑这种情况，也是我的偷懒😆。确实很棘手，就不写这个逻辑分支的代码了。这里提醒一下~

5.2 大boss 父节点及根节点设置了不可见css属性
 只要设置该css语句：html {display:none;}，页面所有元素立刻消失不见。而任意特定元素的上级节点，只要设置了 opacity,display,visibility，判断逻辑瞬间变得复杂起来。所以，这个浑水我也不趟 O(∩_∩)O哈哈~

六、改进的点

其实特殊情况排除的判断，我偷懒没做到最好——rgb颜色值和特定颜色值(比如red)没有进行统一的转换，只是加了生硬的判断if(value == "transparent" || value == "rgba(0, 0, 0, 0)")。
 有兴趣的可以搜索下颜色值转换的js方法，这里我就不写了。

七、源码和demo

源码地址：https://github.com/wall-wxk/blogDemo/blob/master/2017/02/05/getStyle.html
demo：https://wall-wxk.github.io/blogDemo/2017/02/05/getStyle.html

补充

谢谢@烟雨雾岚 的提醒的新思路：canvas截图+Js获取图片某点颜色，这样可以完美解决所有的问题。

喜欢我文章的朋友，扫描以下二维码，关注我的个人技术博客，我的技术文章会第一时间在博客上更新

点击链接wall的个人博客