Aller au contenu

Injecter du CSS avec du javascript


Sujets conseillés

Posté

Bonjour à tous,

je suis en train de construire un fichier javascript qui pourra être appelé depuis n'importe quel site distant et qui y écrira un texte et des images.

Le souci c'est que le texte en question, je veux le mettre en forme. Je me suis dit que j'allais éviter de faire en sorte que le JS appelle à son tour un fichier CSS, histoire de ne pas provoquer un hit supplémentaire sur mon site.

J'ai donc mis le CSS et le JS dans le même fichier, et le JS est chargé de créer une balise style (createElement), de lui faire un innerHTML avec le CSS, et de la mettre dans le <head>. Avec Firefox et Opéra, c'est nickel, mais pour IE et Safari, c'est le drame ! J'imagine qu'ils ne laissent pas le JS accéder directement au feuilles de style... enfin je ne sais pas trop.

Savez-vous comment résoudre le problème en gardant 1 seul fichier qui inclut JS et CSS ?

Merci beaucoup !

Posté

Bonjour,

personne n'a essayé ou réussi à le faire ?

J'ai vu une technique qui permet de modifier directement la définition d'une règle CSS (pas juste la redéclarer) en passant par le document.stylesheets mais je ne sais pas encore si ça marche sur un site distant... Je vais essayer et je vous dirai ce que ça donne. Par contre, si c'est le cas, ça laisse présager la nécessité de créer une classe qui parsera du CSS normal pour injecter chaque propriété via une commande javascript... trop galère quoi...

Si vous avez d'autres idées n'hésitez pas !!

Merci

Posté

Pour des éléments à déposer sur un site distant, n'utilise surtout pas de fichier CSS ou de forcer la déclaration dans le head, tu risques des effets de bord non négligeable : des conflits de CSS entre tes déclarations et celles du site distant.

Le mieux c'est de faire des styles inline. genre


<div style="border: 1px solid #CCC;"></div>

Posté

Merci pour ta réponse Dadou !

Je n'écris que des règles qui sont préfixées qz_ donc il y a peu de chances que j'écrase les règles du site distant, si ?

Ca me paraît crade de revenir à l'affichage en ligne au lieu du CSS... ou alors il me faudrait une fonction javascript qui irait le rajouter inline à ma place... tu connais une telle fonction ?

Merci !

Posté

La manière propre d'utiliser le CSS, c'est de le mettre dans le header car sinon, une modification d'une propriété entraîne la modification de chaque balise qui la porte... enfin ce n'est pas moi qui vais t'apprendre l'intérêt de séparer le contenu de la mise en forme n'est-ce pas :)

Mais bon, avec une fonction maison getElementsByClassName ça doit être faisable plus ou moins proprement. Je vais considérer cette option, merci.

Posté

Non ce n'est certainement pas toi qui va m'apprendre la manière propre d'utiliser les CSS, mais comme beaucoup tu t'attaches à une règle générique, qui malheureusement, n'est pas toujours la meilleure ou la plus propre des solutions, en l'occurrence ton problème actuel ne colle pas à la règle générique, l'usage de l'attribut style à été créé justement pour les cas ou la règle générique ne peut être la meilleure. S'amuser à vouloir changer les CSS par JS alors qu'un attribut style convient amplement est une énormité, c'est la méthode la pire à utiliser.

Posté

Le souci, c'est que même si tu préfixes tes contenus, le site distant peut avoir des règles qui lui sont propres plus générales qui peuvent modifier certains comportements de tes règles.

L'avantage de mettre les CSS en inline, c'est que tes styles auront toujours la priorité sur les styles qui pourront être définis par le site distant. Par contre tu te dois d'être exhaustif dans leur rédaction !

Posté

D'accord, merci pour vos réponses ! :)

Posté

Je vais suivre vos conseils de mettre le CSS en ligne dans les balises. Par contre, étant donné que les propriétés sont changeantes (je veux pouvoir appliquer un "thème" en particulier sur le texte affiché), il y aura un tout petit peu de JS pour choisir tel ou tel jeu de CSS à injecter dans le code. Ce n'est pas plus mal, ça permet de centraliser le CSS au début de mon script dans un tableau javascript. Le résultat sera dispo dans mon webservice dans quelques jours :) Merci encore pour vos idées.

Veuillez vous connecter pour commenter

Vous pourrez laisser un commentaire après vous êtes connecté.



Connectez-vous maintenant
×
×
  • Créer...