Как получить доступ к свойствам стиля псевдоэлементов с помощью jQuery?

Для контекста, это продолжение более раннего вопроса. Вместо того, чтобы копать через 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.

Подробнее см. в живая страница. Возможно ли это?

Ответы

Ответ 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/

EDIT:

:before не является допустимым селектором jQuery: http://api.jquery.com/category/selectors/

Я думаю, вам нужно будет использовать что-то отличное от :before или попытаться извлечь исходное правило с помощью плагина jQuery: http://flesler.blogspot.com/2007/11/jqueryrule.html

Ответ 2

Вот решение, использующее простой javascript:

// 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');