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

问题描述

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

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

给关心的人的上下文:我正在开发一个 jQuery 移动应用程序并尝试使用 FontAwesome 图标.我希望能够使用 jQM 用于其自己的内置图标集的相同数据图标属性来添加它们.因此，我有一个脚本，可以搜索页面中包含 ui-icon-whatever 类的任何内容，并为 FontAwesome 添加相应的 icon-whatever 类.问题在于 FontAwesome 为其图标使用伪内容，而 jQM 使用良好的老式背景图像精灵.因此，如果图标名称碰巧有任何重叠(例如，两组都有一个名为edit"的图标)，我最终会将一个图标分层放置在另一个图标的顶部.正如你想象的那样，看起来……不太好.所以我试图通过设置内容属性从任何 .ui-icon 中删除背景图像.基本上，如果存在具有该名称的 FontAwesome 图标，则删除 jQM 图标.

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.

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

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.

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

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.

我做错了什么?

下载了 Windows 版 Safari 5.一样的.内容始终为空字符串.我开始认为这可能与我用来获取 this 的 jQuery 选择器有关.

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屋！