Création dynamique d'une feuille de style

**tom42** · 11/01/2008, 11h27

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

**jbrasselet** · 11/01/2008, 11h29

Il te donne quoi comme erreur?

**tom42** · 11/01/2008, 11h37

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

**SpaceFrog** · 11/01/2008, 11h40

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**tom42** · 11/01/2008, 12h22

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 ?

**SpaceFrog** · 11/01/2008, 12h25

En ayant les feuilles déja linkées ?

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

**tom42** · 11/01/2008, 12h42

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

<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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

Création dynamique d'une feuille de style

JavaScript

Vue hybride

Discussions similaires

Partager

Partager