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

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

// 获取元素计算后的样式
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 "color: #800000">4.4 排除特殊情况



// 检测获取的背景色是否有效
function checkBgValue(elem){
 var value = getStyle(elem, 'background-color'),
  hasColor = 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永远处在食物链的最顶层。
  当前题目不考虑这种情况，也是我的偷懒"color: #800000">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
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持！