在Chrome中获取伪元素内容 [英] Getting pseudo-element content in Chrome

问题描述

对于那些关心我的人来说，我在工作中遇到一些麻烦：一个jQuery移动应用程序，并试图使用FontAwesome图标。我希望能够使用jQM用于其自己的内置图标集的相同data-icon属性添加它们。所以我有一个脚本，用 ui-icon-whatever 在页面中搜索任何东西，并添加相应的图标 - 任何 FontAwesome类。麻烦的是，FontAwesome使用伪内容的图标，而jQM使用良好的老式背景图像精灵。因此，如果图标名称出现任何重叠（例如两个集合都有一个名为edit的图标），我最终会有一个图标层叠在另一个图标上。正如你可能想象的那样看起来...不太好。所以我试图去通过和删除背景图像从任何 .ui-icon 与内容属性设置。

当我学习getComputedStyle时，我很兴奋，但我试过了 window.getComputedStyle（this，'：before'）。content！=''和几个变体没有效果。尝试使用':: before'和'before'作为第二个属性，并尝试将其与null或false而不是一个空字符串进行比较，但结果是相同的：它找到所有的图标或没有一个。

当我在Chrome的控制台中输出 window.getComputedStyle（this，'：before'）。content 总是得到什么似乎是一个空字符串，即使在应该有内容的情况下。 Firefox正确。

我做错了什么？

修改：已下载适用于Windows的Safari 5。一样的。内容始终为空字符串。我开始认为它可能与我使用的jQuery选择器有关的这。

解决方案

这个问题很老，但是如果有人正在寻找一个解决方案，这是你怎么做的：

  window.getComputedStyle（document.querySelector（'＃element'），'：after'）。getPropertyValue（'content'）
  

I'm having some trouble getting the generated content of a pseudo-element via Javascript in webkit browsers.

Context for those who care: I'm working on a jQuery mobile app and trying to use FontAwesome icons. I was hoping to be able to add them with the same data-icon property that jQM uses for its own built-in icon set. So I've got a script that searches the page for anything with the class ui-icon-whatever and adds the corresponding icon-whatever class for FontAwesome. The trouble is that FontAwesome uses pseudo-content for its icons while jQM uses good old-fashioned background-image sprites. So if there happens to be any overlap in the icon names (both sets have an icon named "edit" for example), I end up with one icon layered on top of the other. As you might imagine that looks... less than great. So I'm trying to go through and remove the background image from any .ui-icon with a content property set. Basically, remove the jQM icon if a FontAwesome icon with that name exists.

I was excited when I learned about getComputedStyle, but I've tried window.getComputedStyle(this,':before').content != '' and several variations to no avail. Tried it with '::before' and just 'before' as the second property, and tried comparing it to null or false instead of an empty string, but the result is the same: it either finds all the icons or none of them.

When I dump out window.getComputedStyle(this,':before').content in Chrome's console, I always get what appears to be an empty string, even in cases where there should be content. Firefox gets it right. I'm not sure if this is a Chrome thing or a webkit thing.

What am I doing wrong?

Edit: Downloaded Safari 5 for Windows. It's the same. Content is always an empty string. I'm starting to think it might have something to do with the jQuery selector I'm using to get this.

解决方案

This question is quite old but if anyone is looking for a solution, this is how you do it:

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

这篇关于在Chrome中获取伪元素内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！