3

要素が :first-letter スタイルでスタイル設定されているかどうかを知る必要があります。これは一般的な解決策であるため、クラス名や特別なスタイル属性には依存しません。何か方法はありますか？例：

<p class="initial">First</p>
<p>Second</p>

.initial:first-letter {
float: left;
font-size: 1.5em;
font-weight: bold;
}

$('p').click(function(){
    // how to determine if :first-letter is applied to current paragraph?

});
4

3 に答える 3

2

cssRules を反復処理し、すべての::first-letterルールの配列を構築してから、要素にこれらのルールのいずれかが含まれているかどうかを確認できます。

動作デモ(Chrome のみでテスト済み)

(function() {
    var firstLetterRules = [];

    var loadRules = function() {
        var stylesheets = document.styleSheets;

        for (var i = 0; i < stylesheets.length; i++) {
            var stylesheet = stylesheets[i];
            var rules = stylesheet.cssRules;

            for (var k = 0; k < rules.length; k++) {
                var rule = rules[k];

                if (rule.selectorText.indexOf("::first-letter") !== -1) {
                    //It is a ::first-letter selector. Add the rule to a list of ::first-letter rules.
                    firstLetterRules.push(rule.selectorText.toUpperCase());
                }
            }
        }
    };

    window.hasFirstLetterStyle = function(element) {
        var fullSelector = element.nodeName;

        if (element.className != '')
            fullSelector += '.' + element.className;

        fullSelector = fullSelector.toUpperCase() + "::FIRST-LETTER";

        for (var i = 0; i < firstLetterRules.length; i++) {
            if (fullSelector == firstLetterRules[i])
                return true;
        }

        return false;
    };

    loadRules();
})();

var element = document.getElementById("init");

if (hasFirstLetterStyle(element)) {
    console.log("Element has a first-letter style rule.");
}
于 2013-07-31T12:38:34.750 に答える
1

それはいけません。

疑似セレクターとそのスタイルは、JS コードからアクセスできません。

最も近い方法は、要素にスタイルをトリガーする関連クラスがあるかどうかを確認しfirst-letter、クラスが存在する場合はfirst-letterスタイルが適用されているはずであると JS コードで仮定することです。

CSS ファイル全体を手動で解析する以外に、他に方法はありません。

:beforeこれは、他の疑似セレクターおよび疑似要素にも適用されます (ここでは、およびについて同様の質問をする同様の質問が多数あり:after、同様の回答があります)

于 2013-07-31T12:23:58.367 に答える