获取元素样式的基础知识，特地补充一些遗漏的地方

转载于 2018-01-04 08:59:25 发布 · 83 阅读

CC 4.0 BY-SA版权

原文链接：https://segmentfault.com/a/1190000012701897

本文探讨了如何通过JavaScript获取带有背景样式的元素节点。详细介绍了querySelectorAll()和getComputedStyle()两种方法的区别，前者用于查找内联样式，后者则能获取元素的所有实际应用样式，包括外部样式表。

关于获取元素样式的基础知识，特地补充一些遗漏的地方。

今天同事问了这样一个问题，有什么办法可以获取所有带有background属性的元素节点?

凭借经验直接脱口而出使用css3的 querySelectorAll() 根据类似正则的东西去找document.querySelectorAll('style*="background"')’ 担心有问题还特地去一家网站去测试，结果也确实获取到了。

语句给别人发过去之后别人说不对获取不到，后来经过排查他要获取的所有的样式包括内外联，使用querySelectorAll()只是可以根据元素的内联样式去寻找，但是却找不到外联样式。

后来找到了一个这样的方法 document.getComputedStyle(element,null)[styleName] 这样可以获取到当前元素正在使用的样式规则，自然也就包含了内外联，只是这样的方法不能够像querySelectorAll()这样可以查找到所有符合的元素来，这就尴尬了......