Establecer reglas de pseudo-clase CSS desde JavaScript

Estoy buscando una manera de cambiar las reglas de CSS para los selectores de pseudo-clase (como: link,: hover, etc.) desde JavaScript.

Entonces, un análogo del código CSS: a:hover { color: red }en JS.

No pude encontrar la respuesta en ningún otro lado; Si alguien sabe que esto es algo que los navegadores no admiten, también sería un resultado útil.

No puede diseñar una pseudo-clase solo en un elemento en particular, de la misma manera que no puede tener una pseudo-clase en un atributo inline style = "..." (ya que no hay un selector).

Puede hacerlo alterando la hoja de estilo, por ejemplo agregando la regla:

#elid:hover { background: red; }

suponiendo que cada elemento que desea afectar tiene una ID única para permitir que se seleccione.

En teoría, el documento que desea es http://www.w3.org/TR/DOM-Level-2-Style/Overview.html, lo que significa que puede (dada una hoja de estilo incorporada o vinculada preexistente) utilizando una sintaxis como:

document.styleSheets[0].insertRule('#elid:hover { background-color: red; }', 0);
document.styleSheets[0].cssRules[0].style.backgroundColor= 'red';

IE, por supuesto, requiere su propia sintaxis:

document.styleSheets[0].addRule('#elid:hover', 'background-color: red', 0);
document.styleSheets[0].rules[0].style.backgroundColor= 'red';

Es probable que los navegadores antiguos y menores no admitan ninguna de las sintaxis. Rara vez se realiza una dinámica de hoja de estilo porque es bastante molesto acertar, rara vez se necesita e históricamente problemático.

Creé una pequeña biblioteca para esto, ya que creo que hay casos de uso válidos para manipular hojas de estilo en JS. Las razones son:

• Establecer estilos que deben calcularse o recuperarse, por ejemplo, configurar el tamaño de fuente preferido del usuario desde una cookie.
• Establecer estilos de comportamiento (no estéticos), especialmente para desarrolladores de complementos / widgets de UI. Las pestañas, carruseles, etc., a menudo requieren un poco de CSS básico simplemente para funcionar, no deberían exigir una hoja de estilo para la función central.
• Mejor que los estilos en línea, ya que las reglas CSS se aplican a todos los elementos actuales y futuros, y no saturan el HTML cuando se ven en Firebug / Developer Tools.

Una función para hacer frente a las cosas entre navegadores:

addCssRule = function(/* string */ selector, /* string */ rule) {
  if (document.styleSheets) {
    if (!document.styleSheets.length) {
      var head = document.getElementsByTagName('head')[0];
      head.appendChild(bc.createEl('style'));
    }

    var i = document.styleSheets.length-1;
    var ss = document.styleSheets[i];

    var l=0;
    if (ss.cssRules) {
      l = ss.cssRules.length;
    } else if (ss.rules) {
      // IE
      l = ss.rules.length;
    }

    if (ss.insertRule) {
      ss.insertRule(selector + ' {' + rule + '}', l);
    } else if (ss.addRule) {
      // IE
      ss.addRule(selector, rule, l);
    }
  }
};

Simplemente coloque el CSS en una cadena de plantilla.

const cssTemplateString = `.foo:[psuedoSelector]{prop: value}`;

Luego cree un elemento de estilo y coloque la cadena en la etiqueta de estilo y adjúntela al documento.

const styleTag = document.createElement("style");
styleTag.innerHTML = cssTemplateString;
document.head.insertAdjacentElement('beforeend', styleTag);

La especificidad se encargará del resto. Luego puede eliminar y agregar etiquetas de estilo dinámicamente. Esta es una alternativa simple a las bibliotecas y jugar con la matriz de hojas de estilo en el DOM. ¡Feliz codificación!

Mi truco es usar un selector de atributos. Los atributos son más fáciles de configurar mediante javascript.

css

.class{ /*normal css... */}
.class[special]:after{ content: 'what you want'}

javascript

  function setSpecial(id){ document.getElementById(id).setAttribute('special', '1'); }

html

<element id='x' onclick="setSpecial(this.id)"> ...  

Hay otra alternativa En lugar de manipular las pseudo-clases directamente, cree clases reales que modelen las mismas cosas, como una clase "flotante" o una clase "visitada". Diseñe las clases con el habitual "." sintaxis y luego puede usar JavaScript para agregar o eliminar clases de un elemento cuando se active el evento apropiado.

En lugar de establecer directamente reglas de pseudo-clase con javascript, puede establecer las reglas de manera diferente en diferentes archivos CSS, y luego usar Javascript para desactivar una hoja de estilo y activar otra. Se describe un método en A List Apart (qv. Para más detalles).

Configure los archivos CSS como,

<link rel="stylesheet" href="always_on.css">
<link rel="stylesheet" title="usual" href="preferred.css"> <!-- on by default -->
<link rel="alternate stylesheet" title="strange" href="alternate.css"> <!-- off by default -->

Y luego cambie entre ellos usando javascript:

function setActiveStyleSheet(title) {
   var i, a, main;
   for(i=0; (a = document.getElementsByTagName("link")<i>); i++) {
     if(a.getAttribute("rel").indexOf("style") != -1
        && a.getAttribute("title")) {
       a.disabled = true;
       if(a.getAttribute("title") == title) a.disabled = false;
     }
   }
}

Como ya se dijo, esto no es algo que los navegadores admitan.

Si no está creando los estilos dinámicamente (es decir, sacándolos de una base de datos o algo así), debería poder solucionar esto agregando una clase al cuerpo de la página.

El CSS se vería algo así como:

a:hover { background: red; }
.theme1 a:hover { background: blue; }

Y el javascript para cambiar esto sería algo como:

// Look up some good add/remove className code if you want to do this
// This is really simplified

document.body.className += " theme1";  

Cambiar hojas de estilo dentro y fuera es la forma de hacerlo. Aquí hay una biblioteca para crear hojas de estilo dinámicamente, para que pueda establecer estilos sobre la marcha:

http://www.4pmp.com/2009/11/dynamic-css-pseudo-class-styles-with-jquery/

En jquery puede configurar fácilmente las pseudo clases flotantes.

$("p").hover(function(){
$(this).css("background-color", "yellow");
}, function(){
$(this).css("background-color", "pink");
});

Aquí hay una solución que incluye dos funciones: addCSSclass agrega una nueva clase css al documento y toggleClass la activa

El ejemplo muestra cómo agregar una barra de desplazamiento personalizada a un div

// If newState is provided add/remove theClass accordingly, otherwise toggle theClass
function toggleClass(elem, theClass, newState) {
  var matchRegExp = new RegExp('(?:^|\\s)' + theClass + '(?!\\S)', 'g');
  var add = (arguments.length > 2 ? newState : (elem.className.match(matchRegExp) === null));

  elem.className = elem.className.replace(matchRegExp, ''); // clear all
  if (add) elem.className += ' ' + theClass;
}

function addCSSclass(rules) {
  var style = document.createElement("style");
  style.appendChild(document.createTextNode("")); // WebKit hack :(
  document.head.appendChild(style);
  var sheet = style.sheet;

  rules.forEach((rule, index) => {
    try {
      if ("insertRule" in sheet) {
        sheet.insertRule(rule.selector + "{" + rule.rule + "}", index);
      } else if ("addRule" in sheet) {
        sheet.addRule(rule.selector, rule.rule, index);
      }
    } catch (e) {
      // firefox can break here          
    }
    
  })
}

let div = document.getElementById('mydiv');
addCSSclass([{
    selector: '.narrowScrollbar::-webkit-scrollbar',
    rule: 'width: 5px'
  },
  {
    selector: '.narrowScrollbar::-webkit-scrollbar-thumb',
    rule: 'background-color:#808080;border-radius:100px'
  }
]);
toggleClass(div, 'narrowScrollbar', true);

<div id="mydiv" style="height:300px;width:300px;border:solid;overflow-y:scroll">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed a eros metus. Nunc dui felis, accumsan nec aliquam quis, fringilla quis tellus. Nulla cursus mauris nibh, at faucibus justo tincidunt eget. Sed sodales eget erat consectetur consectetur. Vivamus
  a diam volutpat, ullamcorper justo eu, dignissim ante. Aenean turpis tortor, fringilla quis efficitur eleifend, iaculis id quam. Quisque non turpis in lacus finibus auctor. Morbi ullamcorper felis ut nulla venenatis fringilla. Praesent imperdiet velit
  nec sodales sodales. Etiam eget dui sollicitudin, tempus tortor non, porta nibh. Quisque eu efficitur velit. Nulla facilisi. Sed varius a erat ac volutpat. Sed accumsan maximus feugiat. Mauris id malesuada dui. Lorem ipsum dolor sit amet, consectetur
  adipiscing elit. Sed a eros metus. Nunc dui felis, accumsan nec aliquam quis, fringilla quis tellus. Nulla cursus mauris nibh, at faucibus justo tincidunt eget. Sed sodales eget erat consectetur consectetur. Vivamus a diam volutpat, ullamcorper justo
  eu, dignissim ante. Aenean turpis tortor, fringilla quis efficitur eleifend, iaculis id quam. Quisque non turpis in lacus finibus auctor. Morbi ullamcorper felis ut nulla venenatis fringilla. Praesent imperdiet velit nec sodales sodales. Etiam eget
  dui sollicitudin, tempus tortor non, porta nibh. Quisque eu efficitur velit. Nulla facilisi. Sed varius a erat ac volutpat. Sed accumsan maximus feugiat. Mauris id malesuada dui.
</div>

Si usa REACT, hay algo llamado radio . Es muy útil aquí:

• Agregue controladores a los accesorios si se especifican estilos interactivos, por ejemplo, onMouseEnter para: desplazar, envolver los controladores existentes si es necesario

• Si alguno de los controladores se activa, por ejemplo, al pasar el mouse, Radium llama a setState para actualizar un campo específico de Radium en el objeto de estado de componentes

• En el renderizado, resuelva los estilos interactivos que se apliquen, por ejemplo: pase el mouse, buscando la clave o la referencia del elemento en el estado específico de Radium