¿Como actualizar un class (CSS) con Javascript?

[Wasper]

Buenas tardes campeones, hoy tengo un nuevo dilema y acudo a vosotros para ver si tengo la posibilidad de sacarme de este atasco.

Tengo una clase llamada .impar que contiene propiedades normales, font-size, color, etc. Resulta que .impar se usa en muchos DIVS y debo cambiarle modificar una propiedad a la clase con Javascript (ya que varía con la accion del usuario).

He estado mirando insertRule que lo que me hace es añadir segun la posicion donde le diga una nueva clase en el indice que se le dio.

Necesitaria que esta clase:

.impar {
border: 1px solid #999999;
float: left;
height: 782px;
padding: 30px;
position: relative;
width: 535px;
}

se actualizara mediante Javascript y me diera el siguiente resultado:

.impar {
border: 1px solid #999999;
float: left;
height: 782px;
padding: 30px;
position: relative;
width: 535px;
background-position:10% 20%;
}

Para los que penseis que usando document.getElementbyId('').style.backgroundPositi on.... no me vale asi, ya que solo me actualiza 1 solo DIV y necesito tocar directamente sobre la clase.

Muchas gracias!

[zerokilled]

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.

[Wasper]

Magnifica respuesta ZeroKilled, he estado mirando sobre selectorText, y puede ser que realice alguna funcion que pudiera satisfacer la necesidad que tengo.

Ya comento aqui el resultado de las pruebas.

Gracias de nuevo.

[Urdaris_Nox]

Creo que si utilizas JQuery te ahorrarías mucha complejidad. Con JQuery puedes manejar clases en conjunto, no individualmente (como getElementById).

Si no me equivoco te bastaría con algo así como

$('.impar').css('background-position', '10% 20%');

(No he verificado que he escrito bien eso, es para que tengas la idea)