Modifier le style css pour le pseudo-élément :after contenu avec Jquery
J'ai baloon forme conçue avec CSS3.
JS Fiddle Exemple
C'est avoir triangle avec
:after {
content: "";
}
J'ai besoin de déplacer le triangle de gauche à droite avec modifier gauche css param avec Jquery.
Je sais que je ne peux pas choisir un pseudo-élément de DOM, mais est-il une autre façon de changer :après le style avec js?
Oui, on peut mettre une autre div à l'intérieur comme
<div class="pop"><div class="arr"></div></div>
mais c'est moche
Vous devez vous connecter pour publier un commentaire.
Il y a un moyen beaucoup plus facile: il suffit de régler le pseudo de l'élément
content
la valeur de la propriété àattr(some-attribute-name)
, il va utiliser la valeur de l'attribut HTML sur le parent que le contenu de la pseudo-élément. Vous pouvez ensuite utiliser lasetAttribute()
méthode sur le parent de l'élément à modifier la valeur de façon dynamique. Ci-dessous sont des simulacres d'extraits de la façon dont cette méthode aurait l'air dans l'action. J'ai aussi fait un blog avec plus de détails qui contient un exemple vivant de violon.CSS
HTML
JavaScript (pour changer de pseudo contenu)
Vous insérez les styles CSS de façon dynamique dans la tête, puis le modifier:
Voici une démo
http://jsfiddle.net/HWnLd/
Comme par cette question relative à la, vous ne pouvez pas sélectionner le pseudo-élément. Donc, je vous suggère de définir des classes CSS, et l'ajout de classes pour le ballon avec jQuery. E. g. utiliser une classe comme ceci:
et de l'appliquer comme ceci:
De travail jsFiddle: http://jsfiddle.net/nrabinowitz/EUHAv/2/