11548 sujets

JavaScript, DOM et API Web HTML5

Ajout dynamique d'un lien vers une feuille de style.

Bonjour,

Je cherche à ajouter dynamiquement un lien vers une feuille de style en utilisant le DOM. J'ai écris pour cela le script suivant :


<script type="text/javascript">
window.onload = function()
{
    elmt=document.createElement("div");
	elmt.innerHTML = "<link href=\"DynamicStyles.css\" type=\"text/css\" rel=\"stylesheet\" />";
	document.body.appendChild(elmt);
}
</script>
</head>

<body>
<p> dfchsdjkfhjksd fhjksd</p>
</body>


Ce code fonctionne bien sous Firefox mais pas sous IE. Savez-vous pourquoi ?

Vous pouvez tester ce code ici.

Quand la page se charge, un lien vers une feuille est inséré dans le DOM et le background du paragraphe devient rouge (sur FF seulement...)

Merci d'avance pour votre aide.

mathmax
Salut,
Peut-être en essayant un d'autre methode de creation dynamique du lien type :


elmt=document.createElement("link");
elmt.setAttribute('rel','stylesheet');
elmt.setAttribute('type','text/css');
elmt.setAttribute('href",'style.css');

var head = document.getElementsByTagName('head').item(0);
head.appendChild(elmt);


C'est juste une idée, j'ai pas essayé.
Sinon C'est peut-être le document.body.appendChild qui plait pas trop a ie, tu peux essayer:


var objBody = document.getElementsByTagName("body").item(0);
objBody.appendChild(elmt);
ok par contre ça ne marche pas avec la balise style. On ne peut pas écrire :

elmt=document.createElement("style");

elmt.setAttribute('type','text/css');

elmtinnerText = "p{background-color:Blue;}";

var head = document.getElementsByTagName('head').item(0);

head.appendChild(elmt);
il vaut mieux a ce moment attribuer une classe dynamiqument a ton element p, avec elP.className = "taclass";

Ou alors utiliser document.write:


<script type="text/javascript">

document.write('<style type="text/css">');    
document.write('.hide {display:none}<');
document.write('/s'+'tyle>'); 
  
</script>


L'avantage du document write étant qu'il est pris en compte imédiatement, ce qui évite des effets bizare au chargement, par contre je crois que ce n'est pas super recomandé, mais je ne sais pas pourquoi.

Tu veux faire quoi avec ça exactement?
Modifié par matmat (31 Mar 2007 - 22:23)
Malheureusement affecter une classe ne me conviens pas. Voilà ce que je cherche à faire : Je fais un appel serveur vers un fichier html, celui-ci me renvoi le contenu du fichier html dans une variable. Je cherche alors à afficher ce contenu dans une div de ma page. Ca marche bien tant qu'il n'y a pas de styles dans mon contenu html, mais dès qu'il y en as, IE ne les prend plus en compte... Je pourrais utiliser un document.write(), mais je crois savoir qu'il faut l'utiliser à l'endroit où l'on veut que le résultat s'affiche dans la page, or dans mon cas c'est dans la fonction qui reçoit les informations du serveur que je peux déterminer si je dois afficher des styles et utiliser un document.write() à cet endroit écrase tout le contenu de ma page... As-tu une autre idée à me conseiller ?

merci pour ton aide.
j'ai peut-être pas tout compris, mais si c'est un appel serveur il vaut mieux faire ça en php ou autre language serveur non?

Par contre si c'est un appel javascript sans recharger la page, il vaut mieux charger un fichier xml que html avec tes infos dans differentes balise type
<stylepage>, <texte> etc. (En fait en xml je ne sais pas exactement quelle sont les "bonnes pratiques"). En effet charger toute une page en innerHTML, j'avais déjà essayé ça fini par foirer au bout d'un moment.
Modifié par matmat (01 Apr 2007 - 01:14)
a écrit :

j'ai peut-être pas tout compris, mais si c'est un appel serveur il vaut mieux faire ça en php ou autre language serveur non?

non je ne fait pas de rechargement de page. Une fonction envoie un nom de fichier en paramètre sur le serveur, celui-ci lit le contenu du fichier, le renvois chez le client javascript l'affiche ensuite dans une div.

Sinon j'ai trouvé une solution un peu fastidieuse, mais ça fonctionne :

function ReceiveServerData(arg)
{
    //http://www.quirksmode.org/bugreports/archives/2006/01/IE_wont_allow_documentcreateElementstyle.html
    if(navigator.appName == "Microsoft Internet Explorer")
    {
        regstyle=new RegExp("(.*)(<style.*?>)(.*?)(</style>)(.*)", "g");
        
        arg = arg.split("\r\n").join("");
        rawsheet = arg.replace(regstyle,"$3");
        html = arg.replace(regstyle,"$5");
        popupContent.innerHTML = html;
        
        newcss = document.createElement("style");
        newcss.type="text/css";
        newcss.media="all";
        document.getElementsByTagName("head")[0].appendChild(newcss);
        cssrules = rawsheet.split("}");
        newcss = document.styleSheets[0];
        for(i=cssrules.length-2;i>=0;i--) 
        {   
            newrule = cssrules[i].split("{");
            properties = newrule[0].split(",");
            for (var j=0;j<properties.length;j++)
                newcss.addRule(properties[j],newrule[1]);
        }
    }
    else
        popupContent.innerHTML = arg;
    ImagesToBackground();
}
[/i]
Sujet clos
Aller à