javascript - examples - img title css



Modifier les attributs de classe CSS avec javascript? (1)

Je pense que c'est ce que tu veux:

<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é à partir d'une réponse fournie dans cette question qui est très similaire à 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ée l'élément <style> et l'ajoute à la <head > du document. Les appels suivants videront simplement l'élément <style> déjà ajouté et ajouteront la nouvelle règle.

https://src-bin.com

J'ai une classe CSS définie, appelez-la:

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

où je positionne un élément sur l'écran absolument. 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 . Quand je redimensionne le navigateur, je veux changer les valeurs de left et de top sur la classe de Foo ainsi la position de tous les éléments de Foo est changé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 left et top calculée.

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

Existe-t-il une bonne façon de modifier par programmation la définition de Foo ?

Merci!





css