如何获取元素的最终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 相关文章推荐
Ajax+Json 级联菜单实现代码
Oct 27 Javascript
JavaScript 学习笔记(十三)Dom创建表格
Jan 21 Javascript
我遇到的参数传递中 双引号单引号嵌套问题
Feb 11 Javascript
JS不间断向上滚动效果代码
Dec 25 Javascript
JavaScript获取某年某月的最后一天附截图
Jun 23 Javascript
jQuery插件windowScroll实现单屏滚动特效
Jul 14 Javascript
基于jquery编写分页插件
Mar 07 Javascript
移动端jQuery修正Web页面滑动时div问题的两则实例
May 30 Javascript
ES6正则表达式的一些新功能总结
May 09 Javascript
vuejs选中当前样式active的实例
Aug 22 Javascript
vuex + keep-alive实现tab标签页面缓存功能
Oct 17 Javascript
node.js express捕获全局异常的三种方法实例分析
Dec 27 Javascript
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
2006/10/09 PHP
php对csv文件的读取,写入,输出下载操作详解
2013/08/10 PHP
Laravel多用户认证系统示例详解
2018/03/13 PHP
PHP与Web页面的交互示例详解一
2020/08/04 PHP
Prototype1.6 JS 官方下载地址
2007/11/30 Javascript
js限制文本框只能输入数字(正则表达式)
2012/07/15 Javascript
jQuery提交表单ajax查询实例代码
2012/10/07 Javascript
javascript实现切换td中的值
2014/12/05 Javascript
原生JS封装Ajax插件(同域、jsonp跨域)
2016/05/03 Javascript
VUEJS实战之修复错误并且美化时间(2)
2016/06/13 Javascript
jQuery实现带遮罩层效果的blockUI弹出层示例【附demo源码下载】
2016/09/14 Javascript
让nodeJS支持ES6的词法----babel的安装和使用方法
2017/07/31 NodeJs
vue实现路由懒加载及组件懒加载的方式
2019/06/11 Javascript
jQuery设置下拉框显示与隐藏效果的方法分析
2019/09/15 jQuery
Weex开发之WEEX-EROS开发踩坑(小结)
2019/10/16 Javascript
JavaScript碰撞检测原理及其实现代码
2020/03/12 Javascript
手把手教您实现react异步加载高阶组件
2020/04/07 Javascript
[03:24]CDEC.Y赛前采访 努力备战2016国际邀请赛中国区预选赛
2016/06/25 DOTA
Python使用代理抓取网站图片(多线程)
2014/03/14 Python
python 统计代码行数简单实例
2017/05/04 Python
对python numpy.array插入一行或一列的方法详解
2019/01/29 Python
基于wxPython的GUI实现输入对话框(2)
2019/02/27 Python
python requests模拟登陆github的实现方法
2019/12/26 Python
Python 读取有公式cell的结果内容实例方法
2020/02/17 Python
Python实现电视里的5毛特效实例代码详解
2020/05/15 Python
Python之Matplotlib文字与注释的使用方法
2020/06/18 Python
Python中bisect的用法及示例详解
2020/07/20 Python
Windows环境下Python3.6.8 importError: DLLload failed:找不到指定的模块
2020/11/01 Python
HTML5拖放API实现拖放排序的实例代码
2017/05/11 HTML / CSS
写一个在SQL Server创建表的SQL语句
2012/03/10 面试题
文员个人的求职信范文
2013/09/26 职场文书
学校安全工作制度
2014/01/19 职场文书
十八届三中全会个人学习材料
2014/02/13 职场文书
租车协议书范本
2014/04/22 职场文书
法学专业求职信
2014/07/15 职场文书
判缓刑人员个人思想汇报
2014/10/10 职场文书