4

jQuery または基本的な JavaScript では、:after または :before 疑似要素を使用してすべての要素を取得できますか?

私は getcomputedstyle を知っていますが、これは :before または :after 疑似要素の有無にかかわらずすべての要素を返します。

ありがとう

編集：

何かのようなもの：

$("a:before").each(function () {
  console.log("element with :before pseudo-element")
});
4

3 に答える 3

1

いいえ。生成されたコンテンツ要素は実際には DOM の一部ではありません。JS を使用してそれらに直接フックすることはできません。それらはプレゼンテーション専用です。

疑似要素の親や兄弟などである可能性のある実際の要素に対して何かを行い、そのように変更することができます。

以下にリンクされている質問 BoltClock を見ると、すべての疑似要素に共通の属性を設定し、この属性に基づいて jquery でそれらを選択してみてください。

于 2012-07-16T11:28:30.163 に答える
0

回り道ですが可能です！

このデモを確認してください: http://jsfiddle.net/BE47z/1/

ロジックは次のようになります。

  1. :beforeCSS でまたは定義を持つすべてのクラスを列挙します。これは、オブジェクト:afterをトラバースすることによって行われます (必要に応じて、コードを catch などのみに変更できます) 。document.styleSheets:before:after
  2. クラスリストを取得したら、次の部分を削除します: CSS でのその名前。例:は次の.a:beforeようになります。.a
  3. これらのクラスに一致するすべての要素を取得できるようになりました

コード

HTML

<div class="element classWithoutBefore">No :before</div>
<div class="element classWithBefore">Has :before</div>
<div class="element class2WithBefore">Has :before</div>
<div class="element class2WithoutBefore">No :before</div>

CSS

.classWithoutBefore {

}

.class2WithoutBefore {

}

.classWithBefore:before {

}

.class2WithBefore:before {

}

.a:before, .b:before {

}

JS

var sheets = document.styleSheets;
var pseudoClasses = [], i = 0, j = 0;
for (i=0; i<sheets.length; i++) {
    try {
        var rules = sheets[i].cssRules;
        for (j=0; j<rules.length; j++) {
            if(rules[j].selectorText.indexOf(':before') != -1 || rules[j].selectorText.indexOf(':after') != -1) {
                pseudoClasses.push(rules[j].selectorText);
            }
        }
    }
    catch(ex) { // will throw security exception for style sheets loaded from external domains
    }
}

var classes = [];
if(pseudoClasses.length > 0) {
    pseudoClasses = pseudoClasses.join(',').split(','); // quick & dirty way to seperate individual class names
    for (i=0; i<pseudoClasses.length; i++) { // remove all class names without a : in it
        var colonPos = pseudoClasses[i].indexOf(':');
        if(colonPos != -1) {
            classes.push(pseudoClasses[i].substring(0, colonPos));
        }
    }
}

// Elements with the classes in the 'classes' array have a :before or :after defined
于 2012-07-16T15:56:29.583 に答える
0

「has-before」などのクラスを選択する「a」タグを付けて、そのようにフックしますか?

于 2012-07-16T11:56:08.203 に答える