Est-il bon de modifier le css de façon dynamique avec javascript injection de code css dans la tête?

C'est "légal" et le travail de la croix-navigateur de l'injection de code CSS dans l'en-tête afin de définir ou de modifier de façon permanente les propriétés de quelque chose?

Par exemple (à l'aide de jQuery):

$('head').append('<style>.myclass { background: #f00;}</style>');

Je l'ai essayé dans Safari 7 et fonctionne.

Est-il ok et la croix-navigateur ou est un hack pour éviter?

Sont il des inconvénients?

OriginalL'auteur Paolo | 2014-01-11

  1. 4

    Oui, c'est légal et il sera plus rapide que $(".myclass").css({background: "#FF0"}) parce que vous n'interagissent avec les DOM une fois plutôt que N fois (où N est le nombre de .myclass éléments sur la page.) Aussi, il sera appliqué à l'avenir .myclass éléments automatiquement.

    L'inconvénient est que vous peut courir dans la spécificité des questions, si vous avez à faire assurez-vous de l'architecte de votre CSS de façon à s'assurer que vous pouvez remplacer le fond avec un seul sélecteur de classe. (jQuery css fonction, puisqu'il définit l'élément style attribut directement, a quelques de la plus grande spécificité par défaut et permet d'éviter ce problème particulier).

    Par exemple, si vous avez eu ce CSS quelque part dans votre lié styles:

    #some-id .myclass { background: #000; }

    puis les DOM-lourds $(".myclass").css l'emporterait sur l'arrière-plan, tandis que l'dynamiquement injecté style (injection juste .myclass { background: #FF0; } ne serait pas).

    L'autre inconvénient est que les vieux IE (<=8) ne vous permet de créer des 31 de ces "dynamique" des feuilles de style. Dans IE >= 9, ce n'est pas un problème.

    Merci Sean. Pourriez-vous expliquer mieux (ou faire un exemple) la "spécificité problème"? Comme jQuery définir les attributs de style directement, il remplace les spécifications de l'CSS..
    exemple ajouté.

    OriginalL'auteur Sean Vieira

  2. 1

    Je pense que vous êtes face à un 4 solutions scénario.

    Aucune ne soit vraiment élégant et parfait, mais voici mes 2 cents:

    1. Injecter le code css dans la section head du code HTML

      C'est exactement ce que vous suggérez dans votre question. Cette solution fonctionne bien, mais seulement si la modification se produit une fois. Si vous avez besoin d'apport de nombreux modification ultérieure de la tête du code HTML, peut devenir encombré.

    2. Vous pouvez détecter l'insertion de l'objet DOM avec Javascript et de les garder en synchronisation

      Ici vous êtes un JSFiddle qui fait exactement cela: http://jsfiddle.net/ITnok/9FQVa/28/

      Cette solution fonctionne très bien si vous (et peut-être votre utilisateur) ne sont pas censés faire de nombreux changements étalés dans le temps, MAIS seulement si vous avez le contrôle sur l'objet DOM insertion: la clé est de créer un événement personnalisé pour déclencher chaque fois que vous insérez un nouvel objet.

      Voici le morceau de code à partir de la JSFiddle que la poignée de l'événement personnalisé:

      //   This event is the key to keep CSS in sync... in realtime!
$( document )
    .on( 'mickeymouseadded', '.mickeymouse', function( e ) {
        $( this )
            .attr(
                'style',
                $( this )
                    .siblings( ':first' )
                    .attr( 'style' )
            );
    } );

    3. Vous pouvez utiliser MutationObserver (nouvelle version de l'ancien et obsolète Mutation Événements)

      Voici le lien vers la documentation: https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver

      C'est une formidable façon de traiter le problème, mais malheureusement, il n'est pas compatible avec l'ancienne version de l'Interdiction Détonateur (Oups, désolé pour la pêche à la traîne! 🙂 ). Seulement IE11 prend en charge.

      Cette méthode fonctionne même si l'objet de l'insertion est hors de votre contrôle direct, vous n'êtes pas en mesure de créer des événements personnalisés ou ne veulent pas.

    4. Vous pouvez utiliser un plugin jQuery appelé livequery

      Voici le lien vers le dépôt Github de jQuery livequery: https://github.com/brandonaaron/livequery

      Jamais essayé ce très plugin, mais il semble que cela pourrait être une bonne solution pour interroger les DOM et de déterminer ce qui doit être modifié, et synchronisés.

    Toutes ces solutions sont basées sur la présence de Javascript

    mais pour autant que je sais de ce que vous nous avez dit que ce ne serait pas un problème pour vous! 😉

    Espère que ça aide...

    OriginalL'auteur Simone Conti

  3. -1

    Si l'utilisateur a désactivé javascript dans son navigateur (plus rapide à charger des pages), il devrait être un problème.

    Vous devez:

    • écrire le fixe css de votre site dans les fichiers css,
    • utiliser js uniquement si vous avez certains d'analyse à faire (si vous souhaitez insérer dans chaque <span class="to_change">...</span> un peu de css par exemple).
    ce n'est pas un problème, c'est un javascript webapp. ...et si un utilisateur désactive le javascript, je pense, sera en mesure de faire très peu de choses sur l'internet d'aujourd'hui...
    L'OP a demandé spécifiquement sur la modification des css dynamiquement. Si l'utilisateur a désactivé javascript, alors la seule solution pour dynamiquement l'édition des styles est de leur demander gentiment de le ré-activer.
    Un site web doit être clair, sans javascript. L'exécution css modification n'est pas une bonne chose, seulement si vous ajoutez du contenu à votre page: par exemple: l'insertion de la css d'un diaporama, si votre script js pour vous permettre de personnaliser votre diaporama. Vous devriez avoir dit avant, c'était une javascript webapp.

    OriginalL'auteur Pierre Emmanuel Lallemant