如何获取元素的最终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 相关文章推荐
学习ExtJS form布局
Oct 08 Javascript
WEB高性能开发之疯狂的HTML压缩
Jun 19 Javascript
浅析jquery的js图表组件highcharts
Mar 06 Javascript
jQuery学习总结之jQuery事件
Jun 30 Javascript
原生js和jQuery随意改变div属性style的名称和值
Oct 22 Javascript
JS实现网页标题栏显示当前时间和日期的完整代码
Nov 02 Javascript
基于javascript实现listbox左右移动
Jan 29 Javascript
js实现不重复导入的方法
Mar 02 Javascript
详解jQuery插件开发方式
Nov 22 Javascript
React Native 截屏组件的示例代码
Dec 06 Javascript
vue拖拽排序插件vuedraggable使用方法详解
Aug 21 Javascript
实例分析javascript中的异步
Jun 02 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/12/04 PHP
PHP操作文件方法问答
2007/03/16 PHP
php导出CSV抽象类实例
2014/09/24 PHP
PHP使用xmllint命令处理xml与html的方法
2014/12/15 PHP
Javascript笔记一 js以及json基础使用说明
2010/05/22 Javascript
关于UTF-8的客户端用AJAX方式获取GB2312的服务器端乱码问题的解决办法
2010/11/30 Javascript
jqgrid 简单学习笔记
2011/05/03 Javascript
读jQuery之六 缓存数据功能介绍
2011/06/21 Javascript
jquery验证手机号码、邮箱格式是否正确示例代码
2013/07/28 Javascript
一个字符串反转函数可实现字符串倒序
2014/09/15 Javascript
js实现瀑布流的三种方式比较
2020/06/28 Javascript
全面了解JavaScirpt 的垃圾(garbage collection)回收机制
2016/07/11 Javascript
jQuery实现ajax的叠加和停止(终止ajax请求)
2016/08/08 Javascript
BootStrap中Table分页插件使用详解
2016/10/09 Javascript
解决浏览器会自动填充密码的问题
2017/04/28 Javascript
浅析 NodeJs 的几种文件路径
2017/06/07 NodeJs
Vue实现表格批量审核功能实例代码
2019/05/28 Javascript
Vuex 模块化使用详解
2019/07/31 Javascript
js实现无缝轮播图特效
2020/05/09 Javascript
Vue 实现一个简单的鼠标拖拽滚动效果插件
2020/12/10 Vue.js
Python中getpass模块无回显输入源码解析
2018/01/11 Python
Python实现的序列化和反序列化二叉树算法示例
2019/03/02 Python
Python任务自动化工具tox使用教程
2020/03/17 Python
Python selenium页面加载慢超时的解决方案
2020/03/18 Python
Python气泡提示与标签的实现
2020/04/01 Python
python UDF 实现对csv批量md5加密操作
2021/01/01 Python
梅西百货澳大利亚:Macy’s Australia
2017/07/26 全球购物
网络工程专业自荐信范文
2014/03/16 职场文书
葬礼司仪主持词
2014/03/31 职场文书
幼儿园评语大全
2014/04/17 职场文书
承诺书格式
2014/06/03 职场文书
合伙经营协议书范本
2014/09/13 职场文书
国庆横幅标语
2014/10/08 职场文书
小学英语教师研修感悟
2015/11/18 职场文书
初中团支书竞选稿
2015/11/21 职场文书
pytorch 带batch的tensor类型图像显示操作
2021/05/20 Python