web-dev-qa-db-fra.com

Modifier le style CSS pour le pseudo-élément: après le contenu avec Jquery

J'ai une forme de ballon conçue avec CSS3.
JS Fiddle Example C'est un triangle fait avec

:after {
    content: "";
}

J'ai besoin de déplacer le triangle de gauche à droite avec la modification gauche param css avec Jquery. Je sais que je ne peux pas sélectionner de pseudo-élément qui hors DOM, mais y a-t-il une autre façon de changer: après le style avec js?

Oui, nous pouvons mettre un autre div à l'intérieur comme

<div class="pop"><div class="arr"></div></div>

mais c'est moche

htmlcsspseudo-element
30
Shara

Il existe un moyen beaucoup plus simple: il suffit de définir la valeur de la propriété content du pseudo-élément sur attr(some-attribute-name), il utilisera la valeur de l'attribut HTML sur le parent comme contenu pour le pseudo-élément. Vous pouvez ensuite utiliser la méthode setAttribute() sur l'élément parent pour modifier la valeur dynamiquement. Vous trouverez ci-dessous de faux extraits de l'aspect de cette méthode en action. J'ai également fait un blog avec plus de détails qui contient un exemple de violon en direct.

[~ # ~] css [~ # ~]

#SomeElement:after {
    content: attr(some-attribute-name);
}

[~ # ~] html [~ # ~]

<div id="SomeElement" some-attribute-name="Pseudo content here!"></div>

JavaScript (pour changer le pseudo contenu)

var someElement = document.getElementById('SomeElement');
someElement.setAttribute('some-attribute-name', 'New pseudo content here!');
41
csuwldcat

Vous insérez les styles CSS dynamiquement dans la tête, puis modifiez cela:

$("<style type='text/css' id='dynamic' />").appendTo("head");

$('.pop').click(function(e){
  $("#dynamic").text(".pop:after{left:" + e.offsetX+ "px;}");
});

Voici une démo

http://jsfiddle.net/HWnLd/

27
methodofaction

Selon cette question connexe , vous ne pouvez pas sélectionner le pseudo-élément. Je suggère donc de définir des classes CSS supplémentaires et d'ajouter des classes au ballon avec jQuery. Par exemple. utilisez une classe comme celle-ci:

.pop.right:after {
    left: 80%;   
}

et l'appliquer comme ceci:

$('div.pop').addClass('right');

Travailler jsFiddle: http://jsfiddle.net/nrabinowitz/EUHAv/2/

21
nrabinowitz