Création dynamique d'une feuille de style

Version imprimable

Bonjour,
Je cherche à créer un nœud <style> dans le <head> :
Code:

1 2 3 4 5 6 7 8 var style = document.createElement("style"); style.type = "text/css"; var styleTxt = document.createTextNode(".slider{ position : relative; } .slider_cursor{ position : absolute; left : 0; top : 0; }"); alert('1'); style.appendChild(styleTxt); alert('2'); var tmp = document.getElementsByTagName('head'); tmp[0].appendChild(style);
Ceci marche bien avec FF et Safari mais "oh surprise" pas avec IE. Ce dernier bloque sur style.appendChild(styleTxt);
J'ai essayé avec style.innerHTML sans succés.
Avez vous une idée ? Merci d'avance.

11/01/2008, 11h29
jbrasselet

Il te donne quoi comme erreur?
11/01/2008, 11h37
tom42

Désolé je ne trouve pas la console d'erreur de IE7.

oulà c'est pas comme ça du tout
jette plutot un oeil sur
Code:

1 2 document.styleSheets[0].cssRules[1] pour Firefox et consors document.styleSheets[0].rules[2] pour IE4 et >

11/01/2008, 12h22
tom42

Merci pour la réponse je ne connaissais pas cela,
Mais voici ma problèmatique :
J'ai un javascript dans un fichier externe.
J'ajoute ce script via les balises <script> .
Dans ma page j'ai des <div> utilisés par mon script qui ont une classe css (.slider et .slider_cursor).
Il faut que j'ajoute dans mon fichier externe, lorsqu'il se charge, des régles css pour ces 2 classes.
Le problème est que la page HTML posséde une, plusieurs ou aucune feuille de style. Avec document.styleSheets je ne sais quelle feuille selectionner et je ne suis meme pas sur qu'il en existe une. De plus la déclaration de mon script ce trouve peut être après celle des feuilles de style donc pas encors connues au moment de l'éxécution.
C'est pour cela que je voulais créer tous simplement un nouveau noeud <style> dans le <head>.
Si vous m'avez compris, quelques suppositions ?

En ayant les feuilles déja linkées ?

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<html>
 
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Toggle css</title>
<link id="css1" rel="stylesheet" href="mystyle1.css" type="text/css" media="screen" />
<link id="css2" rel="stylesheet" href="mystyle2.css" type="text/css" media="screen" />
<script language="JavaScript">
function togglecss(){
document.getElementById('css1').disabled =!document.getElementById('css1').disabled;
document.getElementById('css2').disabled =!document.getElementById('css2').disabled;
 }
</script>
</head>
<body onload="document.getElementById('css2').disabled=true">
ce texte est de la couleur attribuée pas le fichier css<br/>
<input type="button" value="toggle css" onclick="togglecss()" />
</body>
</html>

Mon javascript éxterne gére des barres "glissières".
Je veux intégrer ce composant dans n'importe que page en ajoutant juste la ligne

Code:

<script type="text/javascript" src="_utilitaire/slider.js"></script>

indépendemment des élément dejà present dans le <head>
et en ajoutant mon composant dans le <body>
Code:

1 2 3 4 5 6 <div class="slider"> <div class="slider_track"><img src="_medias/track2.gif" alt="" title="" /></div> <div class="slider_cursor" onmousedown="sliderVerticalStart(this,event,35,94,afficherTaux2)" > <img src="_medias/cursor2.gif" alt="" title="" ondrag="return false;" /> </div> </div>
Le script slider.js doit donc se charger d'ajouter les styles pour les class slider et slider_track.

11/01/2008, 13h03
SpaceFrog

les class existent, enfin je veux dire les fichiers css ?
tu peux soit mettre les links en disabled soit faire un document.creatElement('link') ...

Non les fichier css de mon composant n'existe pas mais la page peut éventuelement en avoir.
Donc en fait j'en crée un au cas ou:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
var style = document.createElement("link");
var tmp = document.getElementsByTagName('head');
tmp[0].appendChild(style);
alert(document.styleSheets.length);
var agent = navigator.userAgent.toLowerCase();
if(agent.indexOf("msie ") != -1){
    document.styleSheets[0].addRule('.slider{ position : relative; }');
    document.styleSheets[0].addRule('.slider_cursor{ position : absolute; left : 0; top : 0; }');
} else {
    document.styleSheets[0].insertRule('.slider{ position : relative; }',0);
    document.styleSheets[0].insertRule('.slider_cursor{ position : absolute; left : 0; top : 0; }',1);
}

FF trouve bien le link ainsi créé mais pas IE ni Safari.

11/01/2008, 14h25
SpaceFrog

oui il semblerait que IE ne retourne pas sur le serveur ...
C'est pour cela que je te proposais une autre methode ou tous les links sont au depart sur la feuille mais disabled ...
11/01/2008, 14h28
tom42

Oui je vais utiliser cette mèthode, en fait je me fais #@** pour rien.
Dans tout les cas merci pour ta patience.