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


¿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.


32
2017-12-19 03:41


origen


Respuestas:


EDITAR: Ahí es técnicamente una forma de cambiar directamente los estilos de pseudo-elemento de CSS a través de JavaScript, como esta respuesta describe, 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');

19
2017-08-31 00:47



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 el mismo, que luego puede usarse para editarlo.


12
2017-11-08 13:55



No puede aplicar estilos a elementos psuedo en JavaScript.

Sin embargo, puede agregar un <style> etiqueta en el encabezado de su documento (o tener un placeholding <style id='mystyles'> y cambia su contenido), que ajusta los estilos. (Esto funcionaría mejor que cargar en otra hoja de estilo, porque incrustado <style> las etiquetas tienen mayor prioridad que <link>'d ones, asegurándose de no tener problemas 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.


4
2017-11-08 05:44



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 es Recuperando o cambiando 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".


3
2017-10-07 23:57



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/


2
2018-04-18 20:29



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 las reglas CSS de forma dinámica en Webkit (Safari / Chrome)?


0
2017-12-19 04:07