0

「コンテンツ」プロパティが擬似要素の前または後に設定されている場合、javascript (jQuery を使用) でチェックインするにはどうすればよいですか? クロムでwindow.getComputedStyle(elem, '::before').getPropertyValue('content')は、'content' が空の文字列に設定されている場合とコンテンツが設定されていない場合の両方で、空の文字列を返します。

私は 1 つの解決策を考えました。幅や高さなどの他のプロパティを設定し、計算されたスタイルが影響を受けるかどうかを確認します。ただし、getComputedStyle の呼び出し回数を最小限に抑えたいと考えています。

ありがとう

4

4 に答える 4

0

window.getMatchedCSSRulesを使用してから、ルールに目を通すことをお勧めします。

function hasBeforeContentProperty(elt) {
    return [].some.call(
        window.getMatchedCSSRules(elt, '::before'),
        function(rule) {
            return /content/.test(rule.cssText);
        }
    );
}

これにはいくつかの防弾と健全性テストが必要ですが、概念は::before疑似要素に適用可能なルールを見つけてから、それらのcssTextプロパティを調べて、空の文字列として指定されているかどうかにかかわらず、コンテンツが指定されているかどうかを確認することです。ルールでコンテンツが指定されていない場合でも、後者は常に空の文字列になるため、rule.cssTextを見る代わりにのテキスト スキャンを実行する必要があることに注意してください。rule.style.content

于 2014-09-16T16:20:29.093 に答える
0

Chrome と Opera には、PseudoElements の getComputedStyle() にバグがあります。

のスタイル#elem::beforeが に設定されている場合、{display: none;}または{content: none}コンテンツが単に設定されていない場合、どちらも #elem の計算されたスタイルを返します。

しかし、実際には問題ありません。コンテンツが含まれていない PseudoElement はdisplay: none表示されないため、コンテンツを表示するように設定する必要があります。

cssの内容は引用符で囲む必要があります:

div::before { content: "something"}   or { content: "" } // empty string.

.getComputedStyle(...).content を取得すると、空の文字列ではなく、2 つの引用符を含む文字列が取得されます。そうすれば、両方のケースを区別できます。

javascriptでcontent 値を使用する場合は注意してください。二重引用符で囲む必要があります。

CSS3 と同様に、指定されたコンテンツを明示的に「なし」に設定できます。

#elem::before { content: none } // without quotes!

この場合、FF と IE はnoneを返し、Chrome と Opera は実際には何も返しません。

ここで JSFidlleを使用して、すべてのケースをテストします。

于 2014-09-16T16:03:24.770 に答える