[CSS, DOM]parcourir un CSS

**quidam66** · 19/05/2006, 18h18

Salut

J'ai dans ma page 3 feuilles de style externes. Je souhaite en ouvrir une de ces trois et la parcourir pour changer la largeur d'un id précis. Mon problème c'est l'ouverture du fichier, pour le reste, tout est ok. La seule façon de faire, que j'ai trouvé, c'est de donner l'index du fichier à ouvrir selon sa position dans le code avec l'instruction suivante:

Code :

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

1
2
 
   var mysheet = document.styleSheets[2];

Dans la ligne recopiée ci-haut j'ouvre la CSS qui se retouve en position 3 dans ma page (index débutant à 0). Ce que je souhaite, c'est de pouvoir appeler la CSS directement par son nom et pouvoir, par la suite, la parcourir avec les facilités que me donne le DOM. J'ai trouvé sur le web l'attribut href de styleSheets mais lorsque j'appelle ma fonction, il me retourne un erreur.

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
 
 
<html>
<head>
 <title>Untitled</title>
 
 <link rel="stylesheet" type="text/css" href="common.css">
 <link rel="stylesheet" type="text/css" href="modules.css">
 <link rel="stylesheet" type="text/css" href="sample.css">
 
 <script language="JavaScript">
 
  function fctchangerwidth() {
   var mysheet = document.styleSheets.href("sample.css");
   ...

Bon, est-ce que c'est un bug IE? Est-ce que ma styntaxe est à chier? est-ce possible de demander d'ouvrir une CSS directement ou faut-il absolument passer par son index de positionnement dans la page?

Je ne sais pas si je suis sur le bon forum. J'ai du javascript, des css et du dhtml, alors pardonnez-moi si je me suis gourré.

Merci

quidam66

**Swoög** · 20/05/2006, 03h19

styleSheets est un tableau, donc href doit pouvoir s'appliquer uniquement à ces éléments...

de plus, les éléments de styleSheets sont des balises link dont l'attribut rel est à stylesheets c'est tout...

DOM sert à parser des documents XML, le CSS n'est pas un langage XML, DOM ne pourra donc rien pour toi

**SpaceFrog** · 23/05/2006, 15h09

Swoog ne t'emballe pas ...

on peut acceder aux elements des css par:

Code :

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

1
2
3
var st=document.styleSheets[0];
var ru=st.rules?st.rules:st.cssRules;
for (i=0;i<ru.length;i++){document.write(ru[i].selectorText + '   ' + ru[i].style.cssText+'\<br\/\>')}

ça me rappelle une défi de notre cher javatwister

**quidam66** · 23/05/2006, 15h57

Bonjour swoog

Désolé, mon post précédent à merder! Excusez-moi!

Je ne sais pas si je viens totalement défaire ton argument mais j'ai réussi à résoudre mon problème et voici le code.

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
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
 
 <script type="text/javascript">
  <!--/*--><![CDATA[//><!--
  var cssName = "css/common.css";
  var myCSS;
 
  function init() {
   myCSS = fctCssExist();
   fctWidth('div1');
  }
 
/*vient seulement vérifier si la variable a été déclarée ou si le fichier se
    retrouve bien dans les feuilles déclarées en début de page*/
function fctCssExist() {
 var mySheet;
 try {
  /* si la variable est déclarée */
  if (cssName != null) {
   /*boucle dans toutes les feuilles qui sont déclarée en haut de page*/
   for (i=0; i<document.styleSheets.length; i++) {
    /* si on trouve un href = à la variable globale on vient affecter
        mySheet en lui assignant le contenu de la CSS et on met une
        variable a tru sinon on la met a false*/
    if(document.styleSheets[i].href == cssName) {
     mySheet = document.styleSheets[i];
     sheetFind = true;
     break;
    } else {
     sheetFind = false;
    }
   }
 
   if (sheetFind == true) {
    return mySheet;
   } else {
    /* message d'erreur si il ne retrouve pas la CSS dans la page*/
    alert("The cssName variable is wrong.");
    return false;
   }
  }
 } catch (e){
  /*message si la variable n'est pas trouvée*/
  alert("You completely forgot to declare the cssName variable.");
  return false;
 }
}
 
function fctWidth(divID) { 
 if (myCSS != false) {
  /* on boucle dans la CSS parmi toutes les ligne de la CSS*/
  for (i=0; i<myCSS.rules.length; i++){
   /* si l'identifiant est égale au paramêtre passé à la fonction on
       vient prendre le width et on le change selon si on est en overflow
       ou pas*/
   if (myCSS.rules[i].selectorText=="#"+divID){
    var CSSrules = myCSS.rules[i];
    var widthVal = CSSrules.style.width;
    var numVal = widthVal.substring(0, widthVal.indexOf("px"));
 
    var boxHeight =document.getElementById(divID).clientHeight;
    var boxOverflow = document.getElementById(ulID).scrollHeight;
    if (boxOverflow > boxHeight) {
     CSSrules.style.width = (numVal-32)+"px";
    }
    break;
   }
  }
 }
}
 
  //--><!]]>
 </script>

Ca fonctionne très bien. Je réussi à changer la largeur du div que je passe en paramêtre à ma fonction. J'aimerais aussi partager à tous ceux qui lirons ce post que le site que j'utilise de plus en plus pour en connaître plus sur les languages du web c'est:http://www.zvon.org
Le seul aspect négatif c'est que le site ne mentionne pas les problèmes de nommenclature des attributs et méthodes entre IE et les autres browser.

Au plaisir

quidam66

[CSS, DOM]parcourir un CSS

CSS

Discussions similaires

Partager

Partager