it-swarm.com.ru

Доступ к селектору css ": after" с помощью 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'
        }
    )
199
dmr

Вы не можете манипулировать :after, потому что он технически не является частью DOM и поэтому недоступен для любого JavaScript. Но вы можете добавить новый класс с указанным новым :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');

ОБНОВЛЕНИЕ: , хотя невозможно напрямую изменить содержимое :after, существуют способы чтения и/или переопределить его с помощью JavaScript. Смотрите "Управление псевдоэлементами CSS с помощью jQuery (например, до и после)" для полного списка методов.

258
Blazemonger

Вы можете добавить стиль для : after подобного HTML-кода.
Например:

var value = 22;
body.append('<style>.wrapper:after{border-top-width: ' + value + 'px;}</style>');
52
r0mank

Если вы используете встроенную в JQuery функцию after() с пустым значением, это создаст динамический объект, который будет соответствовать вашему селектору CSS :after.

$('.active').after().click(function () {
    alert('clickable!');
});

Смотрите документация по jQuery .

8
unpezvivo