Javascript поиск псевдоэлементов

#javascript #css #css-selectors #pseudo-element #sizzle

#javascript #css #css-селекторы #псевдоэлемент #шипение

Вопрос:

Итак, я работал над механизмом выбора CSS, и я хочу поддерживать псевдоэлементы (::before, ::after, ::selection, ::first-line и т.д.). Я заметил, что Slick, Sizzle и некоторые другие популярные движки, похоже, поддерживают их, но при просмотре их кода я не нашел кода для этого (теперь понятно, что я не искал так тщательно). Кто-нибудь знает, как они это делают, или каким-то образом я мог бы это сделать?

1. Поищите в исходном коде Sizzle «фильтры», «setFilters» и т.д., и вы увидите, как они это настраивают.

2. @Pointy: похоже, это относится к псевдоклассам, а не к псевдоэлементам.

3. Хорошо, тогда что заставляет вас думать, что Sizzle поддерживает их? (Что бы вы вообще сделали с ними через Sizzle, поскольку все дело в поиске вещей, а не в непосредственном воздействии на DOM ??)

4. @Pointy: плавная скорость. При запуске с использованием некоторых селекторов псевдоэлементов, кажется, что они находят их нормально. Естественно, все, что вы могли бы сделать с Sizzle, это найти их, но суть в том, что вы могли бы манипулировать ими, как только вы их нашли.

Ответ №1:

Вот простой способ найти их в Webkit с помощью jQuery, который довольно легко можно преобразовать в стандартный JS:

 $('*').filter(function(){return getComputedStyle(this, ':before').length != 0});

Для браузеров на базе Gecko вам нужно что-то немного другое (не тестировалось в IE). Надеюсь, это поможет

1. Объяснение, почему «вам нужно что-то немного другое» getComputedStyle(this, ':before').length всегда ненулевое в Firefox 6 (похоже, ему нравится значение 185, и я не пытался выяснить, почему).

2. Браузеры Gecko и Webkit выводят разные результаты для getComputedStyle — Gecko выводит стили браузера по умолчанию, webkit выводит только в том случае, если элемент был оформлен — если на него ссылаются в CSS. Вам нужно создать пустой элемент без оформления, затем сравнить этот объект style с getComputedStyle(this, ':before') вместо проверки длины — или, возможно, протестировать свойство «content» псевдоэлемента.

3. Мне это нравится. В конце концов, я, вероятно, не собираюсь в конечном итоге внедрять их в свой механизм селектора, но если я решу, это выглядит как достойный способ (хотя и с некоторыми проблемами кроссбраузерности).

4. Это адский подход к проблеме, с которой я столкнулся. Если вам нужно применить CSS к псевдоэлементу на основе случайного класса (например . фокус: перед) и элемент внутри имеет идентификатор, это может быть единственным решением, которого вы достигли бы. Спасибо!