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

给你想要选择一个类的“a”标签，比如“has-before”并以这种方式连接它们？

于 2012-07-16T11:56:08.203 回答
0

这是可能的，但以一种迂回的方式！

检查这个演示：http: //jsfiddle.net/BE47z/1/

逻辑如下：

  1. 枚举所有在 CSS 中具有:before或:after定义的类 - 这是通过遍历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 回答