Доступ к CSS": after " селектор с jQuery [дубликат]

Question

Доступ к CSS": after " селектор с jQuery [дубликат]

этот вопрос уже есть ответ здесь:

Выбор и управление псевдо-элементами CSS, такими как:: before и ::after с помощью jQuery

21 ответов

у меня есть следующий 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'

        }

    )

856 3

jQuery css jquery-selectors

3 ответов:

Comments

Ничего не найдено.

Blazemonger · Accepted Answer · 2017-05-23 14:47:25

вы не можете манипулировать :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 (например: before and: after)" для полного списка методов.

r0mank · Accepted Answer · 2015-02-18 16:11:36

вы можете добавить стиль для :после подобный html-код.
например:
var value = 22;
body.append('<style>.wrapper:after{border-top-width: ' + value + 'px;}</style>');

unpezvivo · Accepted Answer · 2015-02-12 02:11:23

Если вы используете встроенный jQuery after() С пустым значением он создаст динамический объект, который будет соответствовать вашему :after CSS-селектор.
$('.active').after().click(function () {
    alert('clickable!');
});
посмотреть документация jQuery.