一月前端面试--获取元素最终背景色

年前一篇面试总结文章火了起来，一个一年工作经验的前端，面试了BAT等各大互联网公司，看着那些面试题，感觉自己可能是个假的前端。其中微信面试有一个题目是如何获取元素的最终显示背景色，已经有人写出了方法。
原文链接http://www.jianshu.com/p/e94b5779f998
文章中对于父元素没有考虑，我这里做了补充，废话不多说，直接看代码吧

//字符串转换为驼峰

function camelize(str){
    return str.replace(/-(w)/g, function(strMatch, newStr){
        return newStr.toUpperCase();
    })
}

//获取计算后的样式

function getStyle(ele, property) 
    if (!ele || !property) {
         return;
    }

    var defaultValue = ele.style[camelize(property)];
    var css = null;
    if (!defaultValue) {
            if (document.defaultView && document.defaultView.getComputedStyle) {
                css = document.defaultView.getComputedStyle(ele, null);
                defaultValue = css ? css.getPropertyValue(property) : null;
           }  
    }
    return defaultValue;
}

//检查获取背景色的有效性

function checkBgColor(ele){
    var defaultValue = getStyle(ele, "background-color");
    var hasColor = defaultValue ? true : false;
    if(value == "transparent" || value == "rgba(0,0,0,0)"){
        hasColor = false;
    }else if(getStyle(ele, "display") == "none" || getStyle(ele, "visivility" == "hidden")){
        hasColor = false;
    }else if(getStyle(ele, "opacity") == "0"){
        hasColor = false;
    }
    return hasColor;
}

//检测父节点
//这里检测父节点主要是针对父节点设置了隐藏属性(display:none;visibility:hidden;)
function checkParent(ele){
    var parent = ele.parentNode;
    var hasColor = true;
    //一般来说是不会把body设为隐藏
    if(parent.nodeName == "BODY"){
        return hasColor;
    }
    if(getStyle(parent, "display") == "none" || getStyle(parent, "visivility" == "hidden")){
        hasColor = false;
        return hasColor;
    }else{
        checkParent(parent);
    }
}
//获取最终颜色
function getRealBg(elem){
    //如果父元素为隐藏，就不用再获取元素
    if(!checkParent(ele)){
        return ''
    }
    if(checkBgValue(elem)){
        return getStyle(elem, 'background-color');
    }else if(elem != document.documentElement){
        return getRealBg(elem.parentNode);
    }
    return '';
}

所有代码在github上https://github.com/Stevenzwzhai/plugs/tree/master/get-background-color,在这个项目下有多个js的常用插件，欢迎点赞。