我在webkit浏览器中通过Javascript获取伪元素的生成内容时遇到了一些麻烦。
对于那些关心的人的上下文：我正在研究jQuery移动应用程序并尝试使用FontAwesome图标。我希望能够使用jQM用于其内置图标集的相同data-icon属性添加它们。所以我有一个脚本在页面中搜索类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选择器有关。
答案 0 :(得分：6)
这个问题已经很老了，但是如果有人在寻找解决方案，那么你就是这样做的：
window.getComputedStyle(document.querySelector('#element'),':after').getPropertyValue('content')