问题
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.
回答1:
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')
来源：https://stackoverflow.com/questions/19646061/getting-pseudo-element-content-in-chrome