Как получить доступ к свойствам стиля псевдо-элементов с помощью 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());

ничего не соответствует. Пытаюсь!--20-->.siblings() С

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

производит только none значения.

для получения полной информации см. Живые страницы. Возможно ли это?

14
css jquery jquery-selectors pseudo-element

2 ответов

вы не можете использовать :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

6

вот решение, использующее простой 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');
21