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

Posted 2023-05-09

【中文标题】如何使用 jQuery 访问伪元素的样式属性？ [复制]

【英文标题】：How do I access style properties of pseudo-elements with jQuery? [duplicate]

【发布时间】：2011-04-14 04:45:24

【问题描述】：

就上下文而言，这是an earlier question 的后续。我不想深入研究cssRules，而是将逻辑基于搜索这些规则的效果的jQuery选择器。

给定的默认属性

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

选择性地修改

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

如何选择其各自背景位置具有默认值的伪元素？复制选择器，如

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 值。

有关详细信息，请参阅live page。这可能吗？

【问题讨论】：

所以基本上你要选择.class1 .class2，只要元素的背景图片和位置都是默认的（基于CSS规则）？

您可以发布您正在使用的 html 的 sn-p 吗？

@SimpleCoder 我想选择.class1 .class2，只要相邻伪元素的背景位置是默认的。

@格雷格培根； :before 和 :after 伪元素通常用于插入内容 (w3schools.com/CSS/pr_pseudo_before.asp)。 CSS 选择器是否工作？我从来没有见过这样使用它。

@Greg Bacon：不过我仍然可以提供解决方案。相邻，是指任何方向吗？

【参考方案1】：

您不能像这样使用:before 和:after 伪元素。它们的目的是在您指定的选择器之前和之后（分别）插入内容。

使用示例：

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 和类a 的元素的后代。基本上，:before 和:after 不要选择；他们修改。

示例：

这没有按预期工作：

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 不是有效的 jQuery 选择器：http://api.jquery.com/category/selectors/

我认为您需要使用 :before 以外的其他内容或尝试使用 jQuery 插件提取原始规则：http://flesler.blogspot.com/2007/11/jqueryrule.html

【讨论】：

我认为最好注意:before 和:after 生成的内容实际上并没有出现在DOM中（因为它们纯粹是展示性的），因此，真的有没有办法用 jQuery 选择它们。

@蒋毅 - 正是；我也注意到了，但没有提及。谢谢。