Webkit ブラウザーで Javascript を介して疑似要素の生成されたコンテンツを取得する際に問題があります。
気にする人のためのコンテキスト: 私は jQuery モバイル アプリに取り組んでおり、FontAwesome アイコンを使用しようとしています。jQM が独自の組み込みアイコン セットに使用するのと同じ data-icon プロパティを使用してそれらを追加できることを望んでいました。そのため、このクラスでページを検索し、FontAwesomeui-icon-whatever
に対応するクラスを追加するスクリプトを作成しました。icon-whatever
問題は、FontAwesome がアイコンに疑似コンテンツを使用しているのに対し、jQM は古き良き背景画像スプライトを使用していることです。したがって、アイコン名に重複がある場合 (たとえば、両方のセットに「編集」という名前のアイコンがある場合)、一方のアイコンがもう一方の上に重ねられてしまいます。ご想像のとおり、見た目は... 素晴らしいとは言えません。だから私は、背景画像を調べて削除しようとしています.ui-icon
コンテンツ プロパティ セットを使用します。基本的に、その名前の FontAwesome アイコンが存在する場合は、jQM アイコンを削除します。
getComputedStyle について学んだときは興奮しましたがwindow.getComputedStyle(this,':before').content != ''
、いくつかのバリエーションを試してみましたが、役に立ちませんでした。'::before' と 'before' だけを 2 番目のプロパティとして試し、空の文字列ではなく null または false と比較しようとしましたが、結果は同じです。すべてのアイコンが検出されるか、アイコンがまったく検出されないかのどちらかです。
Chrome のコンソールにダンプするwindow.getComputedStyle(this,':before').content
と、コンテンツがあるはずの場合でも、空の文字列のように見えるものが常に表示されます。Firefoxはそれを正しく理解しています。これが Chrome のことなのか Webkit のことなのかわかりません。
私は何を間違っていますか?
編集: Windows用のSafari 5をダウンロードしました。それは同じだ。コンテンツは常に空の文字列です。get に使用している jQuery セレクターと関係があるのではないかと考え始めていますthis
。