我在 webkit 浏览器中通过 Javascript 获取伪元素的生成内容时遇到一些问题。
那些关心的人的上下文:我正在开发一个 jQuery 移动应用程序并尝试使用 FontAwesome 图标。我希望能够使用 jQM 用于其自己的内置图标集的相同数据图标属性来添加它们。所以我有一个脚本可以在页面中搜索任何具有 ui-icon-whatever 类的内容，并为 FontAwesome 添加相应的 icon-whatever 类。问题在于 FontAwesome 为其图标使用伪内容，而 jQM 使用良好的老式背景图像 Sprite 。因此，如果图标名称碰巧有任何重叠(例如，两组都有一个名为“edit”的图标)，我最终会得到一个叠加在另一个图标之上的图标。正如您想象的那样，它看起来……不太好。因此，我正在尝试从任何设置了内容属性的 .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 选择器有关。
最佳答案
这个问题已经很老了，但是如果有人正在寻找解决方案，这就是您的做法:
window.getComputedStyle(document.querySelector('#element'),':after').getPropertyValue('content')
关于javascript - 在 Chrome 中获取伪元素内容，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/19646061/