用JS代码求出页面上一个元素的最终的background-color,不考虑IE浏览器,不考虑元素float情况。(这道题copy自网上)
前端开发,日常最常接触的就是页面样式的编写。而摆脱jQuery等工具库,用原生js获取样式,是每个前端程序猿进阶阶段必须掌握的技能。
2.2 考察面试者的思维缜密程度和开发经验
如果认为单单求元素计算后的样式,就有点too young了。页面的样式的复杂,永远是最虐心的。就算前端有多牛逼,一听到兼容IE6,论谁都会心塞😓。所以还要考虑特殊的情况:display,opacity,visibility
的取值。
3.1 内联样式
内联样式可以通过元素的style属性获取,如果style属性有background-color值,则可以直接获取出来 (暂不考虑!important) 。
DOM2样式规范在document.defaultView
中包含了一个getComputedStyle()
方法。该方法返回一个只读的CSSStyleDeclaration对象,其中包含特定元素的所有计算样式。
4.1 将所有工具方法封装在WDS(wall dom script)命名空间中
代码封装在命名空间里,不会造成无意间的代码污染。
4.2 工具方法camelize
该方法是为了方便后续getStyle()
方法的编写,而独立出来的。
作用是将连字符类的css属性值,转换成驼峰写法。
例如:将background-color转换为backgroundColor
4.3 获取特定元素的计算样式
做到这一步,第一个考察点基本就满足了。也能获知面试者是否具备足够扎实的js基础。
另外,像安全保护性的判断if(!elem || !property)
和功能嗅探if(document.defaultView && document.defaultView.getComputedStyle)
,都能很好地体现开发者的代码逻辑和开发经验。
4.4 排除特殊情况
4.5 获取div在页面最终显示的颜色
获取样式值采用递归方式处理。
如果能顺利获取到元素样式,且不触发4.4 排除特殊情况
中的一种,则直接返回结果。
触发了特殊情况,则需要查找父节点以及更上层的节点的样式,来获取肉眼能看到,显示在页面上的background-color值。
在向上回溯的过程中,如果已经回溯到html
根节点,则可以停止回溯。所以加了判断else if(elem != document.documentElement)
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方法,这里我就不写了。
源码地址: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
谢谢@烟雨雾岚 的提醒的新思路:canvas截图+Js获取图片某点颜色,这样可以完美解决所有的问题。
@IMWeb前端社区
本文由作者wall_wxk授权转发
http://www.jianshu.com/p/e94b5779f998
微信ID:IMWebTech