¿Alterar los atributos de la clase CSS con javascript?

tengo una clase CSS definida, lo llaman:¿Alterar los atributos de la clase CSS con javascript?

<style type="text/css"> 
.Foo { position: fixed; left: 50px; top: 50px; } 
</style>

donde colocar un elemento en la pantalla totalmente. A lo largo de la ejecución de mi página web, creo y elimino muchos elementos y les doy la clase Foo. Cuando cambio el tamaño del navegador, quiero cambiar los valores left y top en la clase Foo, por lo que la posición de todosFoo elementos se modifica como resultado de un cálculo.

No quiero simplemente cambiar hojas de estilo, quiero calcular un valor y hacer que todos los elementos Foo actuales y futuros tengan ese nuevo valor calculado left y top.

Este sitio tiene un ejemplo, pero el código es bastante complejo. http://www.shawnolson.net/a/503/altering-css-class-attributes-with-javascript.html

¿Hay una forma buena y limpia de básicamente modificar programáticamente cómo se define Foo?

Gracias!

Fuente

2009-02-24 Mike

Con respecto a su comentario sobre mi solución, puede eliminar la última etiqueta de estilo agregada al agregar una nueva, o simplemente editar el contenido de la misma etiqueta de estilo cada vez. –

Actualicé mi respuesta para mostrar a qué me refiero. –

creo que esto es lo que quiere:

<script> 
var style; 
function changeFoo(left, top) { 
    if(typeof style == 'undefined') { 
     var append = true; 
     style = document.createElement('style'); 
    } else { 
     while (style.hasChildNodes()) { 
      style.removeChild(style.firstChild); 
     } 
    } 
    var head = document.getElementsByTagName('head')[0]; 
    var rules = document.createTextNode(
     '.Foo { left: ' + left + 'px; top: ' + top + 'px; }' 
    ); 

    style.type = 'text/css'; 
    if(style.styleSheet) { 
     style.styleSheet.cssText = rules.nodeValue; 
    } else { 
     style.appendChild(rules); 
    } 
    if(append === true) head.appendChild(style); 
} 
</script>

Este código se modificó a partir de una respuesta proporcionada en this question que es muy similar a lo que has pedido. Siempre que necesite cambiar la posición de todos los elementos .Foo, puede simplemente llamar a changeFoo (newLeftValue, newTopValue); - La primera vez creará el elemento <style> y lo agregará al <head> del documento. Las llamadas posteriores simplemente vaciarán el elemento <style> que ya se agregó y agregarán la nueva regla.

Fuente

2009-02-24 02:20:23

Creo que esto funcionará, pero la desventaja es que si Foo cambia con frecuencia, digamos, 100 veces, habrá 100 definiciones para Foo en la página (con el efecto de cascada que hace que la última tenga efecto). No veo que eso sea bueno para el rendimiento. – Mike

¿Alterar los atributos de la clase CSS con javascript?

Respuesta

Cuestiones relacionadas