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

年前一篇面试总结文章火了起来,一个一年工作经验的前端,面试了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的常用插件,欢迎点赞。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容