before - Cambio de estilos de pseudo-elemento CSS a través de JavaScript

after css

Question

¿Es posible cambiar un estilo de pseudo-elemento CSS a través de JavaScript?

Por ejemplo, quiero establecer dinámicamente el color de la barra de desplazamiento de esta forma:

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

y también quiero poder decirle a la barra de desplazamiento que se oculte así:

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

Ambos scripts, sin embargo, regresan:

Unkeught TypeError: no se puede leer la propiedad ''style'' de null

¿Hay alguna otra forma de resolver esto?
La interoperabilidad entre navegadores no es importante, solo necesito que funcione en navegadores webkit.

Answer 1

EDITAR : técnicamente hay una forma de cambiar directamente los estilos de pseudo-elemento de CSS a través de JavaScript, como se describe en esta respuesta , pero el método proporcionado aquí es preferible.

Lo más cercano a cambiar el estilo de un pseudo-elemento en JavaScript es agregar y eliminar clases, y luego usar el pseudo-elemento con esas clases. Un ejemplo para ocultar la barra de desplazamiento:

CSS

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

JavaScript

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

Para eliminar más adelante la misma clase, puede usar:

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

Answer 2

No puede aplicar estilos a elementos psuedo en JavaScript.

Sin embargo, puede agregar una etiqueta <style> al encabezado de su documento (o tener un placeholding <style id=''mystyles''> y cambiar su contenido), que ajusta los estilos. (Esto funcionaría mejor que cargar en otra hoja de estilo, porque las etiquetas incrustadas <style> tienen mayor prioridad que las <link> ''d, asegurándose de no tener problemas de conexión en cascada.

Alternativamente, podría usar diferentes nombres de clase y tenerlos definidos con diferentes estilos de elementos de psuedo en la hoja de estilos original.

Answer 3

Para editar una existente a la que no tiene una referencia directa, se requiere iterar todas las hojas de estilo en la página y luego iterar todas las reglas en cada una y luego una cadena que coincida con el selector.

Aquí hay una referencia a un método que publiqué para agregar un nuevo CSS para pseudoelementos, la versión fácil donde está configurando desde js

Javascript establece CSS: después de los estilos

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 devuelve el índice de la nueva regla que puede usar para obtener una referencia para él que se puede usar más adelante para editarlo.

Answer 4

Parece que querySelector no funcionará con pseudo-clases / pseudo-elementos, al menos no esos. Lo único que se me ocurre es agregar dinámicamente una hoja de estilo (o cambiar una existente) para hacer lo que necesita.

Muchos buenos ejemplos aquí: ¿cómo cargo dinámicamente las reglas css en Webkit (Safari / Chrome)?

Answer 5

Publiqué una pregunta similar, pero no del todo, a esta pregunta.

Encontré una manera de recuperar y cambiar estilos para pseudoelementos y pregunté qué opinaban las personas del método.

Mi pregunta está en Recuperar o cambiar reglas CSS para pseudo elementos

Básicamente, puede obtener un estilo a través de una declaración como:

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

Y cambia uno con:

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

Usted, por supuesto, tiene que cambiar la hoja de estilo y el índice cssRules. Lee mi pregunta y los comentarios que dibujó.

He encontrado que esto funciona tanto para pseudo elementos como para elementos / estilos "regulares".

Answer 6

Si te sientes cómodo con alguna degradación elegante en navegadores antiguos, puedes usar CSS Vars. Definitivamente el método más fácil que he visto aquí y en otros lugares.

Entonces en tu CSS puedes escribir:

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

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

Luego en su JS puede manipular ese valor en el elemento #editor:

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

Muchos otros ejemplos de manipulación de CSS vars con JS aquí: https://eager.io/blog/communicating-between-javascript-and-css-with-css-variables/