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

Question

Est-il possible de changer un style de pseudo-élément CSS via JavaScript?

Par exemple, je veux définir dynamiquement la couleur de la barre de défilement comme ceci:

document.querySelector("#editor::-webkit-scrollbar-thumb:vertical").style.background = localStorage.getItem("Color");

et je veux également pouvoir dire à la barre de défilement de se cacher comme ceci:

document.querySelector("#editor::-webkit-scrollbar").style.visibility = "hidden";

Cependant, ces deux scripts renvoient:

Uncaught TypeError: Impossible de lire la propriété 'style' de null

Y a-t-il une autre manière de procéder?
L'interopérabilité entre navigateurs n'est pas importante, je veux juste que cela fonctionne dans les navigateurs Webkit.

Answer 1

Si vous êtes à l'aise avec une certaine dégradation élégante dans les anciens navigateurs, vous pouvez utiliser les variables CSS. C'est certainement la méthode la plus facile que j'ai vue ici et ailleurs.

Donc, dans votre CSS, vous pouvez écrire :

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

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

Ensuite, 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 des variables CSS avec JS ici : https://eager.io/blog/communicating-between-javascript-and-css-with-css-variables/

Answer 2

Pour modifier un existant auquel vous n'avez pas de référence directe, il faut parcourir toutes les feuilles de style sur la page, puis parcourir toutes les règles de chacune d'elles et ensuite rechercher la correspondance de la chaîne avec le sélecteur.

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

Javascript set 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 qui peut être utilisée plus tard pour la modifier.

Answer 3

J'ai changé l'arrière-plan de l'élément pseudo ::selection en utilisant des propriétés personnalisées CSS en faisant ce qui suit :

/* Partie CSS */
:root {
    --selection-background: #000000;
}
#editor::selection {
    background: var(--selection-background);
}

// Partie JavaScript
document.documentElement.style.setProperty("--selection-background", "#A4CDFF");

Answer 4

EDIT: Il existe techniquement un moyen de changer directement les styles des pseudo-éléments CSS via JavaScript, comme le décrit cette réponse, mais la méthode fournie ici est préférable.

La façon la plus proche de changer le style d'un pseudo-élément en JavaScript est d'ajouter et de supprimer des classes, puis d'utiliser le pseudo-élément avec ces classes. Un exemple pour masquer la barre de défilement :

CSS

.hidden-scrollbar::-webkit-scrollbar {
   visibility: hidden;
}

JavaScript

document.getElementById("editor").classList.add('hidden-scrollbar');

Pour supprimer ultérieurement la même classe, vous pourriez utiliser :

document.getElementById("editor").classList.remove('hidden-scrollbar');

Answer 5

Vous ne pouvez pas appliquer de styles aux pseudo-éléments en JavaScript.

Cependant, vous pouvez ajouter une balise </code> à l'en-tête de votre document (ou avoir une balise <code><style id='mystyles'></code> de substitution et en modifier le contenu), ce qui ajuste les styles. (Cela fonctionnerait mieux que de charger une autre feuille de style, car les balises <code><style></code> intégrées ont une priorité plus élevée que celles liées par <code><link></code>, garantissant ainsi que vous n'obtenez pas de problèmes de cascade.</p> <p>Alternativement, vous pourriez utiliser des noms de classe différents et les définir avec des styles de pseudo-éléments différents dans la feuille de style d'origine.</p></x-turndown>