如何使用jQuery访问伪元素的样式属性？

就上下文而言，这是前面问题的后续。 我不想通过cssRules挖掘，而是希望将逻辑基于search这些规则的效果的jQueryselect器。

给定的默认属性

 .commentarea .author:before { background-image: url(http://...); background-position: -9999px -9999px; /* ... */ } 

这是有select性地修改如

 .author[href$="gbacon"]:before /* ... */ { content: ""; background-position: 0 -140px } 

我怎样才能select各自的背景位置有默认值的伪元素？ 在中复制select器

 GM_log("size = " + $(".commentarea .author:before").size()); 

什么都不匹配 尝试.siblings()与

 $(".commentarea .author") .map(function(i) { GM_log($(this) .siblings() .map(function (i) { return $(this).css("background-image") }) .get() .join(", ")) }); 

只产生none值。

有关详细信息，请参阅实时页面 。 这可能吗？

Answer 1

你不能使用:before和:after伪元素。 它们的目的是在分别指定的select器之前和之后插入内容。

用法示例：

HTML：

 <span class='a'> Outer <span class='b'> Inner </span> </span> 

CSS：

 .a .b:before { content: "|Inserted using :before|"; } .a { color: blue; } .b { color: red; } 

结果：

http://jsfiddle.net/mzcp6/

发生了什么事是文本|Inserted using :before| 被插入到内部跨度之前（好，真的，预先），因为它是类b和类b的元素的后代。 基本上， :before和:after ：不select; 他们修改。

例：

这不符合预期：

HTML：

 <span class='a'> <p>More text</p> <span class='b'> <p>More text</p> Inner </span> </span> 

CSS：

 .a .b:before { text-size: 100px; } 

什么都没发生：

http://jsfiddle.net/bQ2ty/

编辑：

:before不是一个有效的jQueryselect器： http : //api.jquery.com/category/selectors/

我想你将需要使用以外的东西:before或者试图使用jQuery插件提取原始规则： http : //flesler.blogspot.com/2007/11/jqueryrule.html

Answer 2

这里是使用纯javascript的解决scheme：

 // Get the color value of .element:before var color = window.getComputedStyle( document.querySelector('.element'), ':before' ).getPropertyValue('color'); // Get the content value of .element:before var content = window.getComputedStyle( document.querySelector('.element'), ':before' ).getPropertyValue('content');