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


Posted in Javascript onFebruary 06, 2017

一、题目

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

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

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
Extjs4中tree的拖拽功能(可以两棵树之间拖拽) 简单实例
Dec 08 Javascript
jQuery之字体大小的设置方法
Feb 27 Javascript
教你如何在 Javascript 文件里使用 .Net MVC Razor 语法
Jul 23 Javascript
深入解析JavaScript中的arguments对象
Jun 12 Javascript
vue-router重定向不刷新问题的解决
Jun 25 Javascript
JS中的一些常用的函数式编程术语
Jun 15 Javascript
vue中使用vue-print.js实现多页打印
Mar 05 Javascript
在vue中使用Echarts利用watch做动态数据渲染操作
Jul 20 Javascript
解决element-ui的下拉框有值却无法选中的情况
Nov 07 Javascript
vue $router和$route的区别详解
Dec 02 Vue.js
canvas多重阴影发光效果实现
Apr 20 Javascript
Vue OpenLayer测距功能的实现
Apr 20 Vue.js
a标签置灰不可点击的实现方法
Feb 06 #Javascript
最常见和最有用的字符串相关的方法详解
Feb 06 #Javascript
jquery uploadify隐藏上传进度的实现方法
Feb 06 #Javascript
Javascript中的prototype与继承
Feb 06 #Javascript
canvas实现粒子时钟效果
Feb 06 #Javascript
javascript笔记之匿名函数和闭包
Feb 06 #Javascript
如何用JS/HTML将时间戳转换为“xx天前”的形式
Feb 06 #Javascript
You might like
PHP STRING 陷阱原理说明
2010/07/24 PHP
PHP获取中英混合字符串长度的方法
2014/06/07 PHP
PHP使用Pthread实现的多线程操作实例
2015/11/14 PHP
laravel 中如何使用ajax和vue总结
2017/08/16 PHP
解决PHP使用CURL发送GET请求时传递参数的问题
2019/10/11 PHP
Laravel 5+ .env环境配置文件详解
2020/04/06 PHP
js 无提示关闭浏览器页面的代码
2010/03/09 Javascript
jQuery easyui datagrid动态查询数据实例讲解
2013/02/26 Javascript
Js点击弹出下拉菜单效果实例
2013/08/12 Javascript
jquery的ajax跨域请求原理和示例
2014/05/08 Javascript
JavaScript Array对象扩展indexOf()方法
2014/05/09 Javascript
浅谈Javascript的静态属性和原型属性
2015/05/07 Javascript
JS实现兼容各种浏览器的获取选择文本的方法【测试可用】
2016/06/21 Javascript
Web打印解决方案之证件套打的实现思路
2016/08/29 Javascript
chrome浏览器如何断点调试异步加载的JS
2016/09/05 Javascript
微信小程序之事件交互操作实例分析
2018/12/03 Javascript
使用webpack搭建vue环境的教程详解
2019/12/31 Javascript
vue动画—通过钩子函数实现半场动画操作
2020/08/09 Javascript
[02:31]DOTA2帕克 英雄基础教程
2013/11/26 DOTA
在Linux系统上通过uWSGI配置Nginx+Python环境的教程
2015/12/25 Python
Python实现的绘制三维双螺旋线图形功能示例
2018/06/23 Python
Python字典遍历操作实例小结
2019/03/05 Python
在python tkinter中Canvas实现进度条显示的方法
2019/06/14 Python
python求质数列表的例子
2019/11/24 Python
用Python做一个久坐提醒小助手的示例代码
2020/02/10 Python
Python插件机制实现详解
2020/05/04 Python
浅谈Keras的Sequential与PyTorch的Sequential的区别
2020/06/17 Python
Keras模型转成tensorflow的.pb操作
2020/07/06 Python
数据库方面面试题
2012/04/22 面试题
收银出纳员岗位职责
2014/02/23 职场文书
代办委托书怎么写
2014/08/01 职场文书
大学生职业生涯规划大赛作品(精品)
2014/09/17 职场文书
2015年党支部公开承诺书
2015/01/22 职场文书
红色电影观后感
2015/06/18 职场文书
HTML基本元素标签介绍
2022/02/28 HTML / CSS
python高温预警数据获取实例
2022/07/23 Python