Changer les styles de pseudo-éléments CSS via JavaScript

pour éditer une règle existante à laquelle vous n'avez pas de référence directe, il faut itérer toutes les feuilles de style sur la page, puis itérer toutes les règles dans chacune, puis la chaîne correspondant au sélecteur.

Voici une référence à une méthode que j'ai posté pour ajouter de nouveaux CSS pour les pseudo-éléments, la version facile où vous mettez à partir de js

set Javascript CSS: after styles

var addRule = (function (style) {
    var sheet = document.head.appendChild(style).sheet;
    return function (selector, css) {
        var propText = typeof css === "string" ? css : Object.keys(css).map(function (p) {
            return p + ":" + (p === "content" ? "'" + css[p] + "'" : css[p]);
        }).join(";");
        sheet.insertRule(selector + "{" + propText + "}", sheet.cssRules.length);
    };
})(document.createElement("style"));

addRule("p:before", {
    display: "block",
    width: "100px",
    height: "100px",
    background: "red",
    "border-radius": "50%",
    content: "''"
});

sheet.insertRule retourne l'index de la nouvelle règle que vous pouvez utiliser pour obtenir une référence à elle qui peut être utilisée plus tard pour l'éditer.

vous ne pouvez pas appliquer les styles aux éléments psuedo en JavaScript.

vous pouvez, cependant, ajouter une étiquette <style> à la tête de votre document (ou avoir un placeholding <style id='mystyles'> et changer son contenu), qui ajuste les styles. (Cela fonctionnerait mieux que de charger dans une autre feuille de style, parce que les étiquettes <style> intégrées ont une priorité plus élevée que celles <link> 'd, en s'assurant que vous n'obtenez pas de problèmes de cascade.

alternativement, vous pourrait utiliser des noms de classe différents et les avoir définis avec différents styles d'éléments psuedo dans la feuille de style originale.

j'ai posté une question semblable à, mais pas complètement comme, cette question.

j'ai trouvé un moyen de récupérer et de changer les styles pour les pseudo-éléments et j'ai demandé ce que les gens pensaient de la méthode.

ma question est à extraire ou modifier les règles css pour les pseudo-éléments

fondamentalement, vous pouvez obtenir un style via un énoncé tel que:

document.styleSheets[0].cssRules[0].style.backgroundColor

et changer un avec :

document.feuilles de style[0].cssRules[0].style.backgroundColor = newColor;

vous, bien sûr, vous devez changer la feuille de style et l'index cssRules. Lisez ma question et les commentaires qu'elle a suscités.

j'ai trouvé que cela fonctionne aussi bien pour les pseudo-éléments que pour les éléments/styles" réguliers".

si vous êtes à l'aise avec une dégradation gracieuse dans les navigateurs plus anciens, vous pouvez utiliser CSS Vars. Certainement la méthode la plus facile que j'ai vu ici et ailleurs.

donc dans votre CSS vous pouvez écrire:

#editor {
  --scrollbar-background: #ccc;
}

#editor::-webkit-scrollbar-thumb:vertical {
  /* Fallback */
  background-color: #ccc;
  /* Dynamic value */
  background-color: var(--scrollbar-background);
}

alors dans votre JS vous pouvez manipuler cette valeur sur l'élément # editor:

document.getElementById("#editor").style.setProperty('--scrollbar-background', localStorage.getItem("Color"));

Beaucoup d'autres exemples de manipulation de CSS à vars avec JS ici: https://eager.io/blog/communicating-between-javascript-and-css-with-css-variables/

semble que querySelector ne fonctionnera pas avec des pseudo-classes/pseudo-éléments, du moins pas ceux. La seule chose à laquelle je peux penser est d'ajouter dynamiquement une feuille de style (ou d'en changer une existante) pour faire ce dont vous avez besoin.

Beaucoup de bons exemples ici: comment charger dynamiquement les règles css dans Webkit (Safari / Chrome)?