Доступ к css “: после” селектор с jQuery
У меня есть следующий css:
.pageMenu .active::after { content: ''; margin-top: -6px; display: inline-block; width: 0px; height: 0px; border-top: 14px solid white; border-left: 14px solid transparent; border-bottom: 14px solid white; position: absolute; right: 0; } Я хотел бы изменить ширину границы верхней, левой и нижней границы с помощью jQuery. Какой селектор я использую для доступа к этому элементу? Я попробовал следующее, но, похоже, он не работает.
$('.pageMenu .active:after').css( { 'border-top-width': '22px', 'border-left-width': '22px', 'border-right-width': '22px' } )
- Включение / выключение флажков
- Как я могу определить, возвращает ли селектор null?
- jQuery выбрать по classу VS выбрать по атрибуту
- Какие селектора CSS3 действительно поддерживают jQuery, например: nth-last-child ()?
- использовать jQuery's find () для объекта JSON
- jQuery hasClass () - проверьте несколько classов
- Является ли jQuery каким-либо кэшированием «селекторов»?
- jQuery: исключить $ (this) из селектора
- Как получить выражение селектора jQuery в виде текста?
- Выбор элементов с определенным цветом фона
- Найти все элементы на основе ids с помощью regex в селекторе jQuery
- jQuery выбирает атрибут с использованием операторов AND и OR
- jQuery: выбрать class элемента и идентификатор одновременно?
Вы не можете манипулировать :after , потому что он не является технически частью DOM и поэтому недоступен для любого JavaScript. Но вы можете добавить новый class с новым :after указанного.
CSS:
.pageMenu .active.changed:after { /* this selector is more specific, so it takes precedence over the other :after */ border-top-width: 22px; border-left-width: 22px; border-right-width: 22px; }
JS:
$('.pageMenu .active').toggleClass('changed');
UPDATE: в то время как невозможно напрямую изменить :after содержимого, есть способы прочитать и / или переопределить его с помощью JavaScript. См. «Манипулирование псевдоэлементов CSS с помощью jQuery (например: before и: after)» для получения полного списка методов.
Вы можете добавить стиль для : после аналогичного html-кода.
Например:
var value = 22; body.append('');
Если вы используете встроенный jQuery after() с пустым значением, он создаст динамический объект, который будет соответствовать вашему :after селектора CSS.
$('.active').after().click(function () { alert('clickable!'); });
См. Документацию по jQuery .