Ver Mensaje Individual
  #2 (permalink)  
Antiguo 18/02/2012, 13:04
Avatar de zerokilled
zerokilled
Javascripter
 
Fecha de Ingreso: abril-2009
Ubicación: Isla del Encanto, La Borinqueña [+>==]
Mensajes: 8.050
Antigüedad: 15 años, 8 meses
Puntos: 1485
Respuesta: ¿Como actualizar un class (CSS) con Javascript?

buenas,
en cierta medida insertRule podría ser una solución, pero tienes un problema grave. imagina que quieres eliminar una propiedad. con insertRule tendrías que indicar todas las propiedades que quieres eliminar pero asignando un valor defacto. la mejor solución es trabajar directamente con la clase. primero obtienes el DOM de la hoja de estilo (document.styleSheets). luego tienes que determinar cuál de los items del objeto cssRules corresponde a la clase que quieres manipular leyendo la propiedad selectorText.

como verás, el asunto parece muy enredado, particularmente cuando se trata del objeto styleSheets y cssRules. mi recomendación es que para agilizar el proceso, separes en una hoja aparte todos los estilos que tienes planificado modificar con javascript. luego, lo cargas al documento con una id (<style id="..."> o <link id="...">). cuando quieras trabajar con ello, obtienes la referencia del elemento por su ID (getElementById), seguido del objeto sheet. el objeto sheet representa un objeto cssStyleSheet o lo mismo que un objeto de la colección document.styleSheets. luego iteras la colección cssRules para comprobar cual índice corresponde a la regla css que quieres modificar. una vez lo tenga, modificas las propiedades como si se tratara de un elemento. es decir, style.nombrePropiedad = valor. en síntesis:
Código:
var sheet =  document.getElementById('id hoja estilo').sheet
for(var i = 0, len = sheet.cssRules.length; i < len; i++) 
if(sheet.cssRules[i].selectorText.indexOf('nombre clase') >= 0){
var rule = sheet.cssRules[i]; break;
}
rule.style.color = "red";
por supuesto, conviene mejor hacerse una función más genérica que devuelva todos posibles cssRule que coincidan y luego manipular las propiedades.

nota: no se en que estado se encuentra iexplorer frente a la implementación DOM de las hojas de estilos, pero si no ha cambiado nada, me temo que lo tienes más complicado para iexplorer. por ejemplo, en lugar cssRules es rules. y si bien recuerdo, en iexplorer no tiene el objeto style, sino una propiedad string que representa todos los estilos escrito en la hoja de estilos. o sea, que en lugar de manipular propiedades de forma individual, debes manipular strings. adicionalmente desconozco si se puede leer el objeto cssStyleSheet (propiedad sheet) desde un elemento style o link.