在Chrome中獲取偽元素內容

Question

我在通過Webkit瀏覽器中的Javascript獲取偽元素的生成內容時遇到了一些麻煩。

關心者的上下文：我正在開發jQuery移動應用程序，並嘗試使用FontAwesome圖標。 我希望能夠使用jQM用於其內置圖標集的相同data-icon屬性添加它們。 因此，我有一個腳本可以搜索頁面中包含ui-icon-whatever類ui-icon-whatever並為FontAwesome添加相應的icon-whatever類。 問題在於FontAwesome使用偽內容作為其圖標，而jQM使用良好的老式背景圖像精靈。 因此，如果圖標名稱碰巧重疊（例如，兩個集合都有一個名為“ edit”的圖標），那么我最終將一個圖標層疊在另一個圖標之上。 就像您可能想象的那樣，效果不佳。 因此，我正在嘗試通過設置內容屬性的任何.ui-icon刪除背景圖像。 基本上，如果存在具有該名稱的FontAwesome圖標，則刪除jQM圖標。

當我了解到getComputedStyle時，我感到很興奮，但是我嘗試了window.getComputedStyle(this,':before').content != ''和幾種變體都無濟於事。 嘗試使用':: before'和'before'作為第二個屬性，並嘗試將其與null或false而不是空字符串進行比較，但結果是相同的：它要么找到所有圖標，要么都找不到。

當我在Chrome的控制台window.getComputedStyle(this,':before').content出window.getComputedStyle(this,':before').content時，即使在應該包含內容的情況下，我也總是得到似乎是空字符串的內容。 Firefox正確無誤。 我不確定這是Chrome還是Webkit。

我究竟做錯了什么？

編輯：下載了適用於Windows的Safari 5。 一樣的。 內容始終是一個空字符串。 我開始認為它可能與我用來獲取this的jQuery選擇器有關。

Answer 1

這個問題已經很老了，但是如果有人在尋找解決方案，這就是您的做法：

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