Modifier les attributs de la classe CSS avec javascript?

J'ai une classe CSS définie, appelez:Modifier les attributs de la classe CSS avec javascript?

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

où je positionner un élément à l'écran tout à fait. Tout au long de l'exécution de ma page Web, je crée et supprime de nombreux éléments et leur donne la classe Foo. Lorsque je redimensionne le navigateur, je veux changer les valeurs left et top sur la classe Foo afin que la position de tous les élémentsFoo soit modifiée à la suite d'un calcul.

Je ne veux pas simplement changer de feuille de style, je veux calculer une valeur et faire en sorte que tous les éléments Foo actuels et futurs aient cette nouvelle valeur calculée left et top.

Ce site a un exemple, mais le code est assez complexe. http://www.shawnolson.net/a/503/altering-css-class-attributes-with-javascript.html

Y a-t-il une bonne façon de modifier par programmation ce que Foo est défini?

Merci!

Source

2009-02-24 Mike

En ce qui concerne votre commentaire sur ma solution, vous pouvez supprimer la dernière balise de style ajoutée lors de l'ajout d'une nouvelle balise ou simplement modifier le contenu de la balise de style à chaque fois. –

J'ai mis à jour ma réponse pour montrer ce que je veux dire. –

Je pense que c'est ce que vous voulez:

<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>

Ce code a été modifié d'une réponse fournie à this question qui est très semblable à ce que vous avez demandé. Chaque fois que vous avez besoin de changer la position de tous les éléments .Foo, vous pouvez simplement appeler changeFoo (newLeftValue, newTopValue); - La première fois, il créera l'élément <style> et l'ajoutera au <head> du document. Les appels suivants videront simplement l'élément <style> déjà ajouté et ajouteront la nouvelle règle.

Source

2009-02-24 02:20:23

Je pense que cela fonctionnera, mais l'inconvénient est que si Foo change fréquemment, disons, 100 fois - il y aura 100 définitions pour Foo sur la page (avec l'effet en cascade provoquant l'effet du dernier). Je ne vois pas cela étant bon pour la performance. – Mike

Modifier les attributs de la classe CSS avec javascript?

Répondre

Questions connexes