Changez le style de: avant et: après pseudo-éléments?

C'est à quoi ressemble mon code:

$('.mainSpan:before').css('background','url(_gfx/cmn/main_bg.png)'); 

Cela ne semble pas fonctionner, alors je demande s'il est même possible d'ajouter des images d'arrière-plan aux éléments d'ombre avec jQuery.

Il n'est pas possible d'accéder directement aux pseudo-éléments avec Javascript car ils ne font pas partie du DOM. Vous pouvez lire leur style à l'aide du deuxième argument facultatif – dont la plupart, bien que pas tous, les navigateurs utilisés dans l'utilisation actuelle – dans .getComputedStyle() mais vous ne pouvez pas modifier directement leur style.

Cependant, vous pouvez modifier leur style indirectement en ajoutant un nouvel élément de style contenant de nouvelles règles. Par exemple:

http://jsfiddle.net/sjFML/

Le CSS initial attribue le :before pseudo-élément avec un fond vert, qui est transformé en noir en insérant un nouvel élément de style .

HTML:

 <div id="theDiv"></div> 

CSS:

 #theDiv { height: 100px; background: red; } #theDiv:before { content:' '; display: block; width: 50px; height: 50px; background: green; } 

Javascript:

 var styleElem = document.head.appendChild(document.createElement("style")); styleElem.innerHTML = "#theDiv:before {background: black;}"; 

Il est possible de modifier la valeur de l'élément :: after mais pas directement. Il faut être sournois. Fonctionne sur tous les navigateurs.

Disons que vous avez un élément:

 <div class="thing1">hi here</class> 

Et vous avez un style ::after css pour ça:

 .thing1::after { content:"I am what comes ::after a thing :)"; display: inline-block; background-color: #4455ff; padding:3px; border: 1px solid #000000; } 

Et vous souhaitez modifier le contenu et la couleur d'arrière-plan du :: après pseudo-élément en utilisant javascript. Pour ce faire, créez une deuxième règle CSS avec les modifications souhaitées et obtenez le nom de classe actuel et ajoutez un nom de classe totalement nouveau. Disons que je souhaite modifier un peu le contenu et la couleur d'arrière-plan et laisser le reste des choses, de même:

 .thing1.extra_stuff::after { content:"Some parts of me, changed!"; background-color: #8888cc; } 

Maintenant, vous pouvez simplement déclencher un événement JavaScript sur Onclick qui appliquera ces deux nouvelles règles à l'élément, en ajoutant le nom de la deuxième classe, à l'élément 🙂 yay

 function change_the_after_attribute(thing_button) { thing_button.className="thing1 extra_stuff"; } 

https://jsfiddle.net/bt8n26a5/


Notes latérales amusantes:

Vous pouvez utiliser thing_button.classList.add("extra_stuff"); Et thing_button.classList.remove("extra_stuff"); Pour rendre la fonction applicable à de nombreux éléments différents avec de nombreux noms de classe différents, et pour pouvoir également supprimer vos modifications!

Utilisez une variable au lieu de la chaîne "extra_stuff" pour modifier ce que vous ajoutez plus dynamiquement.