936 votes

Manipulation des Pseudo-éléments CSS en utilisant jQuery (par exemple : avant et : après)

<p>Est-il possible pour sélectionner/manipuler les Pseudo-éléments CSS telles que <code></code> et <code></code> à l’aide de jQuery ?<p>Par exemple, ma feuille de style a une règle indiquant...</p><pre><code></code></pre><p>Comment puis-je changer « foo » à « bar » à l’aide de jQuery ?</p></p>

694voto

Nick Kline Points 2224

Vous pouvez aussi passer le contenu de la pseudo-élément avec un attribut de données, puis utiliser jQuery pour manipuler que:

Dans le HTML:

<span>foo</span>

En jQuery:

<script>
$('span').hover(function(){
    $(this).attr('data-content','bar');
});
</script>

Dans le CSS:

span:after {
content: attr(data-content); ' any other text you may want'
}

Si vous voulez éviter l '"autre texte" de s'afficher, vous pouvez combiner cela avec seucolega de la solution comme ceci:

Dans le HTML:

<span>foo</span>

En jQuery:

<script>
$('span').hover(function(){
    $(this).addClass('change').attr('data-content','bar');
});
</script>

Dans le CSS:

span.change:after {
    content: attr(data-content) ' any other text you may want';
}

475voto

Blazemonger Points 39230

Vous pensez que cela pourrait être une question simple à répondre, avec tout ce que jQuery peut faire. Malheureusement, le problème se résume à une question technique: css :et après :avant les règles ne font pas partie de la DOM, et par conséquent ne peut pas être modifié à l'aide de jQuery méthodes du DOM.

Il y sont des façons de manipuler ces éléments à l'aide de JavaScript et/ou CSS solutions de contournement; celle que vous utilisez dépend de vos besoins exacts.


Je vais commencer avec ce qui est largement considéré comme le "meilleur":

1) Ajouter/supprimer une certaine classe

Dans cette approche, vous avez déjà créé une classe CSS avec un autre :after ou :before style. La Place cette "nouvelle", plus tard dans votre feuille de style pour vous assurer qu'il remplace:

p:before {
    content: "foo";
}
p.special:before {
    content: "bar";
}

Ensuite, vous pouvez facilement ajouter ou supprimer cette classe à l'aide de jQuery (ou de la vanille en JavaScript):

$('p').on('click', function() {
    $(this).toggleClass('special');
});

http://jsfiddle.net/mblase75/fa5Wn/

  • Avantages: Facile à mettre en œuvre avec jQuery; rapidement modifie plusieurs styles à la fois; met en place la séparation des préoccupations (en isolant votre CSS et JS à partir de votre code HTML)
  • Inconvénients: CSS doivent être rédigés à l'avance, de sorte que le contenu de :before ou :after n'est pas totalement dynamique

2) l'Ajout de nouveaux styles directement du document de la feuille de style

Il est possible d'utiliser JavaScript pour ajouter des styles directement sur le document de la feuille de style, y compris :after et :before styles. jQuery n'est pas un raccourci commode, mais heureusement, le JS n'est pas compliquée:

var str = "bar";
document.styleSheets[0].addRule('p.special:before','content: "'+str+'";');

http://jsfiddle.net/mblase75/n8tVX/

.addRule() et de la .insertRule() méthodes sont relativement bien pris en charge aujourd'hui.

En variante, vous pouvez également utiliser jQuery pour ajouter une toute nouvelle feuille de style à un document, mais le code nécessaire n'est pas de tout cleaner:

var str = "bar";
$('<style>p.special:before{content:"'+str+'"}</style>').appendTo('head');

http://jsfiddle.net/mblase75/3qc4k/

Si nous parlons de "manipuler" les valeurs, pas juste en ajoutant à eux, nous pouvons également lire les existants :after ou :before styles en utilisant une approche différente:

var str = window.getComputedStyle(document.querySelector('p'), ':before') 
           .getPropertyValue('content');

http://jsfiddle.net/mblase75/nHCM6/

Nous pouvons remplacer document.querySelector('p') avec $('p')[0] lors de l'utilisation de jQuery, pour un peu plus court code.

  • Pour: n'importe quelle chaîne peut être dynamiquement inséré dans le style
  • Inconvénients: original styles ne sont pas modifiés, simplement substituée; répété (ab)l'utilisation peut rendre les DOM croître de manière arbitraire

3) Modifier un autre DOM attribut

La plupart des navigateurs vous permettent d' utiliser attr() dans votre CSS pour lire un particulier DOM attribut. En combinant cela avec content: dans certains soigneusement préparé CSS, nous pouvons modifier le contenu (mais pas d'autres propriétés, comme la marge ou de la couleur) :before et :after dynamiquement:

p:before {
    content: attr(data-before);
    color: red;
    cursor: pointer;
}

JS:

$('p').on('click', function () {
    $(this).attr('data-before','bar');
});

http://jsfiddle.net/mblase75/Tfc9j/

Cela peut être combinée avec la deuxième technique si le CSS ne peut pas être préparé à l'avance:

var str = "bar";

document.styleSheets[0].addRule('p:before', 'content: attr(data-before);');

$('p').on('click', function () {
    $(this).attr('data-before', str);
});

http://jsfiddle.net/mblase75/Lfba2/

  • Pros: Ne pas créer d'autres styles sans fin
  • Inconvénients: attr dans le CSS peut s'appliquer uniquement le contenu des chaînes, pas les Url ou les couleurs RVB

158voto

BoltClock Points 249668

Bien qu'ils soient rendus par les navigateurs à travers CSS comme si ils étaient comme des autres éléments du DOM, les pseudo-éléments eux-mêmes ne font pas partie du DOM, et donc vous ne pouvez pas sélectionner et de manipuler directement avec jQuery (ou toute Api JavaScript pour que la matière, pas même les Sélecteurs API).

Vous pouvez toujours trouver d'autres moyens autour d'elle, bien que, par exemple:

  • Manipuler les styles appliqués à ladite pseudo-éléments, en modifiant le document de la feuille de style
  • Appliquer les styles aux pseudo-éléments d'un ou de plusieurs arbitraire classes, puis le basculement entre les classes à l'aide de jQuery (voir seucolega de réponse pour un exemple rapide)

Mais vous ne pouvez toujours pas accéder directement car en fin de compte ils sont seulement visibles par le moteur de rendu, et ne sont pas disponibles par le biais de n'importe quel script Api (sauf peut-être la CSSOM, ce qui n'est pas exposée par jQuery-delà de l' .css() qui ne fonctionne que pour les éléments réels et pas des pseudo-éléments).

Cela s'applique à toutes les pseudo-éléments dont les styles vous êtes en train de la modifier avec jQuery, et pas seulement :before et :after.

78voto

seucolega Points 481
<p>Vous ne pouvez pas sélectionner des éléments pseudo dans jQuery parce qu’ils ne font pas partie du DOM Mais vous pouvez ajouter une classe spécifique à l’élément père et contrôler ses éléments pseudo en CSS.<p><a href="http://jsfiddle.net/1dw7h4s3/" rel="nofollow">EXEMPLE DE</a></p><p>JQuery :</p><pre><code></code></pre><p>En CSS :</p><pre><code></code></pre></p>

37voto

Ivan Chaer Points 1226
<p>Dans la ligne de ce que laisse entendre Christian, vous pourriez également faire :<pre><code></code></pre></p>

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X