web-dev-qa-db-fra.com

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

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

Par exemple, je souhaite définir de manière dynamique la couleur de la barre de défilement comme suit:

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

et je veux aussi 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 façon de s'y prendre?
L’interopérabilité entre les navigateurs n’est pas importante, j’en ai juste besoin pour fonctionner dans les navigateurs Webkit.

javascriptcsscss-selectorspseudo-elementselectors-api
39
木川 炎星

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

Pour modifier le style d'un pseudo-élément en JavaScript, le mieux 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 pouvez utiliser:

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

Pour modifier une feuille existante sur laquelle vous n'avez pas de référence directe, vous devez itérer toutes les feuilles de style de la page, puis toutes les règles de chacune des règles puis la chaîne correspondant au sélecteur. 

Voici une référence à une méthode que j'ai publiée pour ajouter un nouveau CSS pour les pseudo-éléments, la version facile où vous configurez à 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 renvoie l'index de la nouvelle règle que vous pouvez utiliser pour en obtenir une référence, que vous pourrez utiliser plus tard pour la modifier. 

17
user748221

Si vous êtes à l'aise avec une dégradation progressive des navigateurs plus anciens, vous pouvez utiliser CSS Vars. Certainement la plus simple des méthodes que j'ai vues 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);
}

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

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

De nombreux autres exemples de manipulation de fichiers CSS avec JS ici: https://eager.io/blog/communicating-between-javascript-and-css-with-css-variables/

8
Wes Ruvalcaba

Vous ne pouvez pas appliquer de styles à psuedo-elements en JavaScript.

Vous pouvez cependant ajouter une balise <style> à l'en-tête de votre document (ou avoir un <style id='mystyles'> à la place et changer son contenu), qui ajuste les styles. (Cela fonctionnerait mieux que de charger dans une autre feuille de style, car les balises <style> incorporées ont une priorité plus élevée que celles de <link> 'd, ce qui évite les problèmes de cascade.

Vous pouvez également utiliser différents noms de classe et les définir avec différents styles d'élément psuedo dans la feuille de style d'origine.

4
Niet the Dark Absol

J'ai posté une question semblable à cette question, mais pas tout à fait.

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

Ma question est à Récupération ou modification des règles CSS pour les pseudo-éléments

Fondamentalement, vous pouvez obtenir un style via une déclaration telle que:

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

Et changez-en un avec:

document.styleSheets [0] .cssRules [0] .style.backgroundColor = newColor; 

Vous devez bien sûr modifier la feuille de style et l’index cssRules. Lisez ma question et les commentaires qu’elle a tirés.

J'ai trouvé que cela fonctionne pour les pseudo-éléments ainsi que pour les éléments/styles "normaux".

3
SimonT

On dirait que querySelector ne fonctionnera pas avec les pseudo-classes/pseudo-éléments, du moins pas ceux-là La seule chose à laquelle je peux penser est d'ajouter dynamiquement une feuille de style (ou de modifier une feuille de style existante) pour répondre à vos besoins.

Beaucoup de bons exemples ici: Comment charger des règles CSS de manière dynamique dans Webkit (Safari/Chrome)?

0
Hemlock