如何获取元素的最终background-color

一、题目

  用JS代码求出页面上一个元素的最终的background-color，不考虑IE浏览器，不考虑元素float情况。

二、题目解析

  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;}