在 Chrome 中获取伪元素内容

Question

我在 webkit 浏览器中通过 Javascript 获取伪元素的生成内容时遇到了一些问题。

关心的人的上下文：我正在开发一个 jQuery 移动应用程序并尝试使用 FontAwesome 图标。我希望能够使用 jQM 用于其自己的内置图标集的相同数据图标属性来添加它们。所以我有一个脚本，可以在页面上搜索带有ui-icon-whatever 类的任何内容，并为FontAwesome 添加相应的icon-whatever 类。问题是 FontAwesome 使用伪内容作为其图标，而 jQM 使用良好的老式背景图像精灵。因此，如果图标名称碰巧有任何重叠（例如，两组都有一个名为“编辑”的图标），我最终会得到一个图标层叠在另一个图标之上。正如您可能想象的那样，看起来……不太好。所以我试图通过设置内容属性从任何.ui-icon 中删除背景图像。基本上，如果存在同名的 FontAwesome 图标，则删除 jQM 图标。

当我了解到 getComputedStyle 时，我很兴奋，但我尝试了 window.getComputedStyle(this,':before').content != '' 和几种变体都无济于事。尝试使用 '::before' 并且仅将 'before' 作为第二个属性，并尝试将其与 null 或 false 而不是空字符串进行比较，但结果是相同的：它要么找到所有图标，要么没有找到它们。

当我在 Chrome 的控制台中转储 window.getComputedStyle(this,':before').content 时，我总是得到一个空字符串，即使在应该有内容的情况下也是如此。 Firefox 做对了。 我不确定这是 Chrome 还是 webkit。

我做错了什么？

编辑：已下载适用于 Windows 的 Safari 5。一样的。内容始终是一个空字符串。我开始认为这可能与我用来获取 this 的 jQuery 选择器有关。

Answer 1

这个问题很老了，但如果有人正在寻找解决方案，这就是你的方法：

window.getComputedStyle(document.querySelector('#element'),':after').getPropertyValue('content')