[résolu] Charger feuille de style CSS via javascript

Bonjour,

étant débutant en javascript et n'ayant pas trouvé ma réponse sur ce forum pourtant si riche, je sollicite votre aide.

Comme préciser dans le titre du post, je cherche à charger une feuille de style via une fonction javascript, et je ne sais pas vraiment comment m'y prendre.

J'ai trouvé quelques pistes avec "document.write" et "document.childNodes" pour ajouter une balise <link> dans le header mais les syntaxes que j'ai testé ne foncitonnent absolument pas

Si l'un d'entre vous a une idée je suis preneur !
Merci d'avance !
Modifié par zecaraz (16 Jun 2009 - 17:22)

Avant tout, dis nous pourquoi veux tu charger un fichier css avec Javascript ? Il y a peut etre une alternative à ce que tu veux faire.

Et surtout sous quelles conditions (la résolutio d'écran ?).

@alien7 : Je n'ai pas la possibilité de modifier les feuilles de style existantes, et j'intègre des "modules html" dans un outil de gestion de contenu très bridé (Pas d'accès au head par exemple..). Une balise div éditable dans ma page en sorte.
Jusqu'alors, les styles était appliqués directement sur les baslies via "style='...' " mais cette technique n'est déjà pas très propre et limite beaucoup les possibilités de style.
D'où mon choix de vouloir charger une css externe. Evidemment un <link> dans cette div ne fonctionne pas, c'aurait été trop simple


@Laurie-Anne : Je ne comprends pas bien ta question.. tu me demandes le type de média de sortie de la css ? Dans ce cas c'est un media="screen".

Merci à vous

Les pistes dont tu parles dans ton premier post sont exactes. Si tu utilises jQuery, tu pourras faire ça très rapidement:

$(function(){
  $("head").append(
    $(document.createElement("link")).attr({rel:"stylesheet", type:"text/css", href:"styles.css"})
  );
});

@ Benjamin :

Merci pour ta réponse, ton code fonctionne parfaitement !
En revanche il nécessite de faire appel à jquery, ce qui grossi un peu plus le poids de page.
Je suis aussi contraint sur le poids de certaine page, et ne pourrais pas utiliser jquery quand je le souhaite.

Auriez-vous une solution "pure" javascript sans framework?
oui je sais je suis embettant...

jquery se met dans le cache du navigateur, il suffit de faire un appel sur la home et elle n'est pas rechargée par après.

@patidou :

C'est justement sur la home que j'ai beaucoup de restriction sur la bande passante pouvant être utilisée... C'est pourquoi je cherche une solution javascript sans framework

Ok. Alors fais un lien sur la version hébergée chez google : plus de problèmes de bande passante. Au contraire tu profites du CDN de google.

<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script>

@patidou: j'y avais pensé mais la DSI me l'a interdit. Je t'évite le résumé des raisons invoqués...

Mais j'ai monté un script qui fonctionne :

var lien_css = document.createElement('link');
lien_css.setAttribute("href","styles.css");
lien_css.setAttribute("rel","stylesheet");
lien_css.setAttribute("type","text/css");
document.getElementsByTagName("head").item(0).appendChild(lien_css);

Si jamais quelqu'un a des remarques ou autre chose à proposer..

Merci à tous pour vos réponses.

@zecaraz:
Salut. Oui, moi j'ai une question sur ton script : Qu'est-ce qui te fait préférer setAttribute et item à quelque chose comme ça (qui est plus court) :

var lien_css = document.createElement('link');
lien_css.href = "styles.css";
lien_css.rel = "stylesheet";
lien_css.type = "text/css";
document.getElementsByTagName("head")[0].appendChild(lien_css);