如何获取元素的最终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 相关文章推荐
Javascript实例教程(19) 使用HoTMetal(1)
Dec 23 Javascript
jQuery select操作控制方法小结
May 26 Javascript
js中 关于undefined和null的区别介绍
Apr 16 Javascript
使用js对select动态添加和删除OPTION示例代码
Aug 12 Javascript
jquery查找父元素、子元素(个人经验总结)
Apr 09 Javascript
编写高效jQuery代码的4个原则和5个技巧
Apr 24 Javascript
js 获取今天以及过去日期
Apr 11 Javascript
jquery.picsign图片标注组件实例详解
Feb 02 jQuery
vue中改变选中当前项的显示隐藏或者状态的实现方法
Feb 08 Javascript
vue2.0 elementUI制作面包屑导航栏
Feb 22 Javascript
JS实现简单获取最近7天和最近3天日期的方法
Apr 18 Javascript
详解Vue改变数组中对象的属性不重新渲染View的解决方案
Sep 21 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 获取今日、昨日、上周、本月的起始时间戳和结束时间戳的方法
2013/09/28 PHP
ThinkPHP使用Ueditor的方法详解
2016/05/20 PHP
PHP堆栈调试操作简单示例
2018/06/15 PHP
php高性能日志系统 seaslog 的安装与使用方法分析
2020/02/29 PHP
关于全局变量和局部变量的那些事
2013/01/11 Javascript
Node.js开发指南中的简单实例(mysql版)
2013/09/17 Javascript
页面定时刷新(1秒刷新一次)
2013/11/22 Javascript
jquery+easeing实现仿flash的载入动画
2015/03/10 Javascript
微信小程序 wxapp画布 canvas详细介绍
2016/10/31 Javascript
JS+Canvas实现的俄罗斯方块游戏完整实例
2016/12/12 Javascript
懒加载实现的分页&&网站footer自适应
2016/12/21 Javascript
BootStrap Tooltip插件源码解析
2016/12/27 Javascript
jQuery+CSS3实现点赞功能
2017/03/13 Javascript
js调用刷新界面的几种方式
2017/05/03 Javascript
利用jsonp与代理服务器方案解决跨域问题
2017/09/14 Javascript
vue使用axios实现文件上传进度的实时更新详解
2017/12/20 Javascript
vue全局组件与局部组件使用方法详解
2018/03/29 Javascript
es6 symbol的实现方法示例
2019/04/02 Javascript
Vue CLI3中使用compass normalize的方法
2019/05/30 Javascript
JS实现横向跑马灯效果代码
2020/04/20 Javascript
原生JavaScript实现随机点名表
2021/01/14 Javascript
[04:12]第二届DOTA2亚洲邀请赛选手传记-Newbee.Sccc
2017/04/03 DOTA
[03:23:49]2016.12.17日完美“圣”典全回顾
2016/12/19 DOTA
python重试装饰器的简单实现方法
2019/01/31 Python
一篇文章了解Python中常见的序列化操作
2019/06/20 Python
Python的缺点和劣势分析
2019/11/19 Python
Python实现桌面翻译工具【新手必学】
2020/02/12 Python
Lulu & Georgia官方网站:购买地毯、家具、抱枕、壁纸、床上用品等
2018/03/19 全球购物
平面设计师的工作职责
2013/11/21 职场文书
技校生自我鉴定
2013/12/08 职场文书
医院总经理职责
2013/12/26 职场文书
动物科学专业求职信
2014/07/27 职场文书
2014年最新离婚协议书范本
2014/10/11 职场文书
工厂门卫岗位职责
2015/04/13 职场文书
泰坦尼克号观后感
2015/06/04 职场文书
HTML通过表单实现酒店筛选功能
2021/05/18 HTML / CSS