javascript - sintaxis - selectores de atributos css

Establecer reglas de pseudoclase CSS desde JavaScript

Question

Estoy buscando una forma de cambiar las reglas de CSS para los selectores de pseudo-clase (tales como: enlace,: 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.

Answer 1

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>

Answer 2

Cambiar las 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/

Answer 3

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

Si no se te ocurren los estilos dinámicamente (es decir, quitándolos de una base de datos o algo), deberías poder evitar esto agregando una clase al cuerpo de la página.

El CSS se vería así:

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

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

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

document.body.className += " theme1";  

Answer 4

En jquery puede establecer fácilmente pseudo clases de desplazamiento.

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

Answer 5

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 estilos y activar otra. Un método se describe en A List Apart (v. V. 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 cambiar 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;
     }
   }
}

Answer 6

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

Answer 7

Lancé 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:

• Configuración de estilos que se deben calcular o recuperar, por ejemplo, establecer el tamaño de fuente preferido del usuario a partir de una cookie.
• Establecer estilos de comportamiento (no estéticos), especialmente para desarrolladores de widgets / complementos de UI. Las pestañas, los carruseles, etc., a menudo requieren algunos CSS básicos simplemente para funcionar; no deben exigir una hoja de estilos para la función central.
• Mejor que los estilos en línea, ya que las reglas de CSS se aplican a todos los elementos actuales y futuros, y no saturan el HTML cuando se visualizan en Firebug / Herramientas de desarrollo.

Answer 8

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)"> ...  

Answer 9

No se puede aplicar estilo a una pseudoclase solo en un elemento en particular, de la misma manera que no se puede tener una pseudoclase en un atributo style = "..." en línea (ya que no hay 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 su selección.

En teoría, el documento que desea es http://www.w3.org/TR/DOM-Level-2-Style/Overview.html que significa que puede (dada una hoja de estilo incrustada o vinculada preexistente) usando 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'';

Los navegadores mayores y menores probablemente no admitan ninguna sintaxis. La creación de hojas de estilo dinámicas rara vez se realiza porque es bastante molesto acertar, raramente necesario e históricamente problemático.

Answer 10

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

• Agregue controladores a los accesorios si se especifican los estilos interactivos, por ejemplo, onMouseEnter for: hover, envolviendo manejadores existentes si es necesario

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

• Al volver a renderizar, resuelva cualquier estilo interactivo que se aplique, p. Ej., Al pasar el mouse, al buscar la tecla o ref del elemento en el estado específico del radio.

Answer 11

Una función para hacer frente a las cosas del navegador cruzado:

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);
    }
  }
};