web-dev-qa-db-fra.com

Accédez au css ": after" selector with jQuery

J'ai le css suivant:

.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;
}

J'aimerais modifier la largeur de la bordure supérieure, inférieure et gauche à l'aide de jQuery. Quel sélecteur utiliser pour accéder à cet élément? J'ai essayé ce qui suit mais cela ne semble pas fonctionner.

$('.pageMenu .active:after').css(
        {
            'border-top-width': '22px',
            'border-left-width': '22px',
            'border-right-width': '22px'
        }
    )
jquerycssjquery-selectors
203
dmr

Vous ne pouvez pas manipuler :after, car il ne fait pas techniquement partie du DOM et n'est donc inaccessible par aucun code JavaScript. Mais vous pouvez ajouter une nouvelle classe avec un nouveau :after spécifié.

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: bien qu'il soit impossible de directement de modifier le contenu :after, il existe des moyens de lire et/ou le remplacer en utilisant JavaScript. Voir "Manipulation de pseudo-éléments CSS à l'aide de jQuery (par exemple: before et: after)" pour obtenir une liste complète des techniques.

263
Blazemonger

Vous pouvez ajouter un style pour : after un code HTML similaire.
Par exemple:

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

Si vous utilisez after() avec jQuery avec une valeur vide, il créera un objet dynamique qui correspondra à votre sélecteur :after CSS.

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

Voir le documentation jQuery .

7
unpezvivo