Как получить доступ к свойствам стиля псевдоэлементов с помощью jQuery?
Для контекста это является продолжением более раннего вопроса . Вместо того, чтобы копать через cssRules , я хотел бы основывать логику на селекторах jQuery, которые ищут эффекты этих правил.
Приведенные свойства по умолчанию
.commentarea .author:before { background-image: url(http://...); background-position: -9999px -9999px; /* ... */ }
которые выборочно модифицируются, как в
- Могу ли я изменить высоту изображения в CSS: до /: после псевдоэлементов?
- Как я могу сделать сгенерированный контент доступным?
- css вращать псевдо: после или: до содержимого: ""
- CSS: после добавления содержимого к определенным элементам
- Почему: перед и: после псевдоэлементов требуется свойство content?
.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 значений.
Для получения полной информации см. Живую страницу . Это возможно?
- Объединить атрибуты CSS и псевдоэлементы?
- «Text-decoration» и псевдоэлемент «: after», пересмотренный
- Объединить: после: hover
- CSS: прежде чем на встроенном SVG
- Могу ли я настроить таргетинг на: перед или: после псевдоэлемента с помощью сочетания братьев и сестер?
- objective: перед и: после псевдо-элементов с jQuery
- Должен ли я использовать одно или двойное обозначение двоеточия для псевдоэлементов?
- Являются ли CSS3 :: before и :: после псевдоэлементов, поддерживаемых IE9, или нет?
Вы не можете использовать :before и :after псевдоэлементов, подобных этому. Их цель – вставить содержимое до и после (соответственно) указанного вами селектора.
Пример использования:
HTML:
Outer Inner
CSS:
.a .b:before { content: "|Inserted using :before|"; } .a { color: blue; } .b { color: red; }
Результат:
Случилось так, что текст |Inserted using :before| был вставлен раньше (ну, действительно, добавлен в) внутренний диапазон, потому что это был class b и потомок элемента classа a . В принципе :before и :after не выбирают; они изменяются.
Пример:
Это не работает должным образом:
HTML:
More text
More text
Inner
CSS:
.a .b:before { text-size: 100px; }
Ничего не произошло:
РЕДАКТИРОВАТЬ:
:before недействительный селектор jQuery: http://api.jquery.com/category/selectors/
Я думаю, вам нужно будет использовать что-то другое, чем :before или попытаться извлечь исходное правило с помощью плагина jQuery: http://flesler.blogspot.com/2007/11/jqueryrule.html
Вот решение, использующее простой 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');