[RÉSOLU] Récupérer attributs définis par CSS externe via JavaScript ?

Récupérer attributs définis par CSS externe via JavaScript ? [RÉSOLU] - HTML/CSS - Programmation

Marsh Posté le 14-09-2003 à 17:04:17    

Hello !  
 
Je débarque dans le monde du (X)HTML/CSS/JavaScript. Je me bricole un petit site, pour lequel je voudrais faire un menu latéral sous forme d'onglets mobiles (on survole un menu, les onglets inférieurs se décalent et laissent voir tous les sous-menus disponibles...)
 
J'ai remarqué que si les attributs de position sont stockés directement dans le code HTML de ma page de garde, il n'y a pas de problème pour qu'un petit JS récupère et incrément la valeur "top" de la quantité qui va bien.
 
En revanche, si la position est stockée dans une CSS, tant interne qu'externe, rien à faire, ça foire !!!
 
Comment faire ? Y'a-t-il une méthode permettant de parvenir à mes fins ? Et qui soit (au moins !) compatible Mozilla/IE ???
 
Merci !
 
PS : en cherchant, j'ai trouvé ce post, mais sans solution ! http://forum.hardware.fr/forum2.ph [...] subcat=389


Message édité par Al Batar le 14-09-2003 à 19:41:05
Reply

Marsh Posté le 14-09-2003 à 17:04:17   

Reply

Marsh Posté le 14-09-2003 à 17:08:53    

Montres nous ce que tu as déjà fait, ou au moins une page d'exemple. Sinon, difficile de savoir où tu te gourres... ;)

Reply

Marsh Posté le 14-09-2003 à 17:31:05    

Pas faux ! Je vais donc copier/coller !
 
Je me suis attaqué bille en tête au problème du mouvement il y a quelques heures, et j'ai du rabaisser mes ambitions pour conserver ma santé mentale et mon PC intacts - j'ai perdu plusieurs heures avant de m'apercevoir qu'il était difficile d'extraire des attributs d'une feuille de style !
 
Le premier code extrait sans problème un attribut embarqué directement dans une balise.
 
test1.html :

Code :
  1. <html>
  2. <head>
  3. <script language="JavaScript">
  4. function test(n) {
  5. window.alert(document.getElementById(n).style.color)
  6. }
  7. </script>
  8. </head>
  9. <body>
  10. <div id="toto" style="color:red" onMouseOver="test(this.id)">Toto</div>
  11. </body>
  12. </html>


 
Les codes suivants échouent, en revanche !
 
test2.html :

Code :
  1. <html>
  2. <head>
  3. <style type="text/css">
  4. #toto {color:red}
  5. </style>
  6. <script language="JavaScript">
  7. function test(n) {
  8. window.alert(document.getElementById(n).style.color)
  9. }
  10. </script>
  11. </head>
  12. <body>
  13. <div id="toto" onMouseOver="test(this.id)">Toto</div>
  14. </body>
  15. </html>


 
test3.html :

Code :
  1. <html>
  2. <head>
  3. <link type="text/css" rel="stylesheet" href="test3.css" />
  4. <script language="JavaScript">
  5. function test(n) {
  6. window.alert(document.getElementById(n).style.color)
  7. }
  8. </script>
  9. </head>
  10. <body>
  11. <div id="toto" onMouseOver="test(this.id)">Toto</div>
  12. </body>
  13. </html>


 
et sa CSS externe, test3.css :

Code :
  1. #toto {color:red}

Reply

Marsh Posté le 14-09-2003 à 18:08:43    

Eh ben pour le moment, tu me poses une colle. Je ne comprends effectivement pas pourquoi ça ne marche pas. Je continue à chercher. ;)

Reply

Marsh Posté le 14-09-2003 à 18:19:02    

Merci pour tes efforts !
 
Perso, je trouve hallucinant que cela ne marche pas ! Le navigateur, que ce soit via une CSS interne, externe ou par l'attribut "style", reçoit bien les informations !
 
Pourquoi ne veut-il pas les fournir quand on les lui demande ???
 
A noter IE5 et Mozilla 1.4 réagissent pareil : c'est-à-dire mal !


Message édité par Al Batar le 14-09-2003 à 18:19:26
Reply

Marsh Posté le 14-09-2003 à 18:20:50    

Je crois que ce genre de manip ne fonctionne que si le style est déclaré directement dans la balise :(


---------------
www.polychromies.com (Portfolio) - www.photographier-bebe.com (livre photo de bébé) - www.alsacreations.com
Reply

Marsh Posté le 14-09-2003 à 18:43:37    

Je confirme : c'est bien ce que j'ai observé ! Si je veux que ça marche, je code mes attributs en dur dans le fichier HTML...
 
Mais c'est franchement PORC, non ? Je but des CSS c'est quand même de séparer autant que faire se peut le fond de la forme !
 
Alors, que faire ???

Reply

Marsh Posté le 14-09-2003 à 18:50:14    

Je crois que j'ai trouvé une piste sérieuse ici : http://www.oreillynet.com/lpt/a/3769
 
Ça m'a l'air d'être exactement ce qu'il me faut. Avis aux amateurs...

Reply

Marsh Posté le 14-09-2003 à 18:51:47    

Oui, c'est "porc" comme tu le dis.
J'ai déjà vu ce problème sur ce forum... je ne crois pas qu'il ait été résolu :(


---------------
www.polychromies.com (Portfolio) - www.photographier-bebe.com (livre photo de bébé) - www.alsacreations.com
Reply

Marsh Posté le 14-09-2003 à 18:54:53    

Le problème est résolu :
 

Code :
  1. <html>
  2.   <head>
  3.   <link type="text/css" rel="stylesheet" href="test3.css" />
  4.   <script language="JavaScript">
  5.   function test(n) {
  6.     window.alert(document.getElementById(n).currentStyle.color)
  7.   }
  8.   </script>
  9.   </head>
  10.   <body>
  11.   <div id="toto" onMouseOver="test(this.id)">Toto</div>
  12.   </body>
  13.   </html>


 
 :D

Reply

Marsh Posté le 14-09-2003 à 18:54:53   

Reply

Marsh Posté le 14-09-2003 à 18:58:07    

petit coup de pub habituel :o  
 
http://www.magnin-sante.ch/journal [...] .php&id=87


---------------
mon blog : http://www.magnin-sante.ch/journal/
Reply

Marsh Posté le 14-09-2003 à 19:17:55    

Moi aussi j'ai finalement vaincu ! Je vous propose donc ma solution :
 
test3.html

Code :
  1. <html>
  2. <head>
  3. <link type="text/css" rel="stylesheet" href="test3.css" />
  4. <script language="JavaScript">
  5. function getElementStyle(elemID, IEStyleProp, CSSStyleProp) {
  6.     var elem = document.getElementById(elemID);
  7.     if (elem.currentStyle) {
  8.         return elem.currentStyle[IEStyleProp];
  9.     } else if (window.getComputedStyle) {
  10.         var compStyle = window.getComputedStyle(elem, "" );
  11.         return compStyle.getPropertyValue(CSSStyleProp);
  12.     }
  13.     return "";
  14. }
  17. function test(n) {
  18. s=getElementStyle(n,"color","color" );
  19. s+="\n";
  20. s+=getElementStyle(n,"backgroundColor","background-color" );
  21. s+="\n";
  22. s+=getElementStyle(n,"fontSize","font-size" );
  23. s+="\n";
  24. s+=getElementStyle(n,"top","top" );
  26. window.alert(s)
  27. }
  28. </script>
  29. </head>
  30. <body>
  31. <div id="toto" onMouseOver="test(this.id)">Toto</div>
  32. </body>
  33. </html>


 
et la feuille de style test3.css (no comment sur l'horreur, please ;) !) :

Code :
  1. #toto {color:red;background-color:blue;font-size:32px;font-weight:bold;position:absolute;left:100;top:200}


 
Voili voilou, et merci à tous :hello: !

Reply

Marsh Posté le 14-09-2003 à 19:35:44    

Pour fadenreturns :
 
je connais cette (ta) page, mais elle ne convient pas à mes besoins : les menus déroulants masquent le contenu de la page, hors je souhaite expliquer sur la page la fonction de chaque menu ! C'est pourquoi je n'ai pas été voir le source...
 
Tu y règles le problème que nous évoquions ???

Reply

Marsh Posté le 14-09-2003 à 20:10:45    

Al Batar a écrit :

Pour fadenreturns :
 
je connais cette (ta) page, mais elle ne convient pas à mes besoins : les menus déroulants masquent le contenu de la page, hors je souhaite expliquer sur la page la fonction de chaque menu ! C'est pourquoi je n'ai pas été voir le source...
 
Tu y règles le problème que nous évoquions ???


 
Non pas du tout, j'avais pas lu  :o . Tu me file l'adresse de ton truc quand c'est online ?
 
 :)


---------------
mon blog : http://www.magnin-sante.ch/journal/
Reply

Marsh Posté le 14-09-2003 à 20:14:06    

Quand ce sera fait, sans problème ! Mais je suis encore loin du compte, perdu dans les différences d'interprétation des CSS par IE et Mozilla (je m'intéresserai à Opera plus tard !), par exemple pour ce qui concerne les marges :( !

Reply

Marsh Posté le 14-09-2003 à 20:22:04    

Pour Hermes le Messager (de Kro$oft, sans doute ;) pastaper plizzz :D !) :
 
as-tu vérifié que ton script fonctionnait avec autre chose qu'IE ? Parce qu'avec mon Mozilla, ça ne donne rien, alors que mon script (enfin, celui que j'ai repompé sur le site d'O'Reilly), fonctionne...
 
Un grand merci, néanmoins !

Reply

Marsh Posté le 14-09-2003 à 20:29:32    

Je comprend vraiment pas ce que tu veux faire au juste. Tu a pas un exemple ...
 
Tu veux faire un truc comme il y a sur le site de macomédia ?


---------------
mon blog : http://www.magnin-sante.ch/journal/
Reply

Marsh Posté le 14-09-2003 à 20:35:13    

Je connaissais pas leur site... Mais quelque chose comme ça, oui. En vertical, en plus ! Spa du tout cuit !!!

Reply

Marsh Posté le 14-09-2003 à 20:36:22    

Comment ça en vertical ?
 
Je comprend de moins en moins  :sweat: ...


---------------
mon blog : http://www.magnin-sante.ch/journal/
Reply

Marsh Posté le 14-09-2003 à 20:49:49    

Tiens, quelque chose dans ce genre là - pas de sarcasme, c'est le tout début du commencement initial ;) !
 

Code :
  1. <html>
  2. <head>
  3. <link rel="stylesheet" type="text/css" href="testOngletsJavaScript.css" />
  4. <script >
  5. <!--
  6. function getElementStyle(elemID, IEStyleProp, CSSStyleProp) {
  7.     var elem = document.getElementById(elemID);
  8.     if (elem.currentStyle) {
  9.         return elem.currentStyle[IEStyleProp];
  10.     } else if (window.getComputedStyle) {
  11.         var compStyle = window.getComputedStyle(elem, "" );
  12.         return compStyle.getPropertyValue(CSSStyleProp);
  13.     }
  14.     return "";
  15. }
  17. function expand(id) {
  18. var no=parseInt(id.charAt(4))+1;
  19. e=document.getElementById(id);
  20. e.style.backgroundColor="yellow";
  21. while (e=document.getElementById("menu"+no)) {
  22.  e.style.backgroundColor="red";
  23.  e.style.top=parseInt(getElementStyle("menu"+no,"top","top" ))+85;
  24.  no++;
  25. }
  26. }
  28. function reduce(id) {
  29. var no=parseInt(id.charAt(4))+1;
  30. e=document.getElementById(id);
  31. e.style.backgroundColor="cyan";
  32. while (e=document.getElementById("menu"+no)) {
  33.  e.style.backgroundColor="cyan";
  34.  e.style.top=parseInt(getElementStyle("menu"+no,"top","top" ))-85;
  35.  no++;
  36. }
  37. }
  39. //-->
  40. </script>
  41. </head>
  43. <body>
  45. <div id="menu1" class="menu" onMouseOver="expand(this.id)" onMouseOut="reduce(this.id)">
  46. <table>
  47. <tr>
  48. <td class="titre">Menu 1</td>
  49. </tr>
  50. <tr>
  51. <td class="item">Item 1</td>
  52. </tr>
  53. <tr>
  54. <td class="item">Item 2</td>
  55. </tr>
  56. <tr>
  57. <td class="item">Item 3</td>
  58. </tr>
  59. <tr>
  60. <td class="item">Item 4</td>
  61. </tr>
  62. </table>
  63. </div>
  65. <br />
  67. <div id="menu2" class="menu" onMouseOver="expand(this.id)" onMouseOut="reduce(this.id)">
  68. <table>
  69. <tr>
  70. <td class="titre">Menu 2</td>
  71. </tr>
  72. <tr>
  73. <td>Item 1</td>
  74. </tr>
  75. <tr>
  76. <td>Item 2</td>
  77. </tr>
  78. <tr>
  79. <td>Item 3</td>
  80. </tr>
  81. <tr>
  82. <td>Item 4</td>
  83. </tr>
  84. </table>
  85. </div>
  87. <br />
  89. <div id="menu3" class="menu" onMouseOver="expand(this.id)" onMouseOut="reduce(this.id)">
  90. <table>
  91. <tr>
  92. <td class="titre">Menu 3</td>
  93. </tr>
  94. <tr>
  95. <td>Item 1</td>
  96. </tr>
  97. <tr>
  98. <td>Item 2</td>
  99. </tr>
  100. <tr>
  101. <td>Item 3</td>
  102. </tr>
  103. <tr>
  104. <td>Item 4</td>
  105. </tr>
  106. </table>
  107. </div>
  109. <br />
  111. <div id="menu4" class="menu" onMouseOver="expand(this.id)" onMouseOut="reduce(this.id)">
  112. <table>
  113. <tr>
  114. <td class="titre">Menu 4</td>
  115. </tr>
  116. <tr>
  117. <td>Item 1</td>
  118. </tr>
  119. <tr>
  120. <td>Item 2</td>
  121. </tr>
  122. </table>
  123. </div>
  125. <br />
  126. <div id="menu5" class="menu" onMouseOver="expand(this.id)" onMouseOut="reduce(this.id)">
  127. <table>
  128. <tr>
  129. <td class="titre">Menu 5</td>
  130. </tr>
  131. </table>
  132. </div>
  134. <br />
  137. </body>
  138. </html>
  140. <td></td>


 
Voici la CSS temporaire :

Code :
  1. .titre {font-weight : bold ;
  2. color : white ; background-color : navy ;
  3. text-align : center}
  5. .item {font-style : italic ; text-align : center}
  7. .menu {color : red ; background-color : cyan ;
  8. text-align : center ;
  9. border-width : 10px ; border-style : solid ; border-color : navy ;
  10. width : 100px}
  12. #menu1 {position : absolute ; left : 50 ; top : 50 ; z-index : 1}
  14. #menu2 {position : absolute ; left : 50 ; top : 85 ; z-index : 2}
  16. #menu3 {position : absolute ; left : 50 ; top : 120 ; z-index : 3}
  18. #menu4 {position : absolute ; left : 50 ; top : 155 ; z-index : 4}
  20. #menu5 {position : absolute ; left : 50 ; top : 190 ; z-index : 5}
  22. #test {position : absolute ; left : 350 ; top : 100 ;}

Reply

Marsh Posté le 14-09-2003 à 20:57:43    

Oublie, c'est completement inutilisable  :sweat:  !!!
 
C'est hyper deroutant pour le mec qui navigue ...
 
sinon j'avais fait ça dans l'esprit mais il marche pas bien avec IE5 pour les macs
 
http://www.magnin-sante.ch/journal [...] ecial.htm#


---------------
mon blog : http://www.magnin-sante.ch/journal/
Reply

Marsh Posté le 14-09-2003 à 21:47:07    

Pourquoi inutilisable ? En mettant (tant pis mais bon...) une table dans chaque <div> permettant d'afficher des images pour matérialiser les bordures (avec effet 3D), j'obtiendrai sans doute un onglet-like convaincant...
 
Enfin, je crois ;) !
 
Bref, de toute façon, je testerai à fond - quitte à jeter si ça ne convient pas !
 
Personnellement, je considère qu'un site Web et une application sont fondamentalement différents : autant un menu en cascade convient pour une appli, autant j'estime qu'il perturbe la lisibilité d'un site en masquant l'info.  
 
Or, justement, un site est là pour communiquer l'info, alors qu'une appli est là pour construire et/ou ordonner l'info : ceci justifie à mon avis que l'info n'ait pas la même importance dans les deux cas...
 
Mais je suis peut-être complètement à côté de la plaque  :pt1cable: !
 
PS : pas mal du tout ton menu ! T'as pas l'air d'aimer, mais c'est à peu de chose près ce qu'il me faut ! Sauf que je veux que les menus se déplient au survol (pas un pb ;) !), et en plus je veux qu'une description de ce que fait chaque menu et sous-menu s'affiche au "centre" de la page...


Message édité par Al Batar le 14-09-2003 à 21:52:10
Reply

Marsh Posté le 14-09-2003 à 21:54:30    

Ta solution de menu est très déroutante. Elle fonctionne assez bien car le contenu à chaque fois la même hauteur, mais essaie de mettre un contenu de hauteur variable dans le sous menu, je pense que ça va plus jouer...
 
Et les tables cest pas bien. En général on préfère utiliser des listes qui sont plus logique ( même si c'est un peu dur à utiliser ).
 
Pense aussi que 10% des gens n'ont pas javascript activé ...
 
 :hello:


---------------
mon blog : http://www.magnin-sante.ch/journal/
Reply

Marsh Posté le 14-09-2003 à 22:02:11    

fadenreturns a écrit :

Ta solution de menu est très déroutante. Elle fonctionne assez bien car le contenu à chaque fois la même hauteur, mais essaie de mettre un contenu de hauteur variable dans le sous menu, je pense que ça va plus jouer...
 
Je suis au courant de ce défaut ;) ! J'imaginais "cycler" dans les sous-menus pour déterminer leur nombre et essayer m'en sortir ainsi...
 
Et les tables cest pas bien.  
 
Oui, je sais, c'est mal ! Mais ce n'est que le début ! Ça devrait évoluer ;)
 
En général on préfère utiliser des listes qui sont plus logique ( même si c'est un peu dur à utiliser ).
 
Pense aussi que 10% des gens n'ont pas javascript activé ...
 
Ça je ne le savais pas, mais je pensais surtout aux navigateurs en mode texte !
 :hello:  


 
En fait, le plus gros défaut de mon essai, c'est que lorsqu'on passe d'un onglet déplié à un autre onglet non déplié, ce dernier "remonte" en même temps que le précédent se replie, ce qui fait que la souris se retrouve à survoler un sous-menu au lieu du "titre" de l'onglet qu'elle survolait initialement...
 
Et à moins de réussir à déplacer le pointeur de la souris en même temps que l'onglet remonte (je ne sais même pas si c'est possible, mais de toute façon, ce ne sont pas des manières !), je ne sais pas trop comment m'en sortir...
 
Vais peut-être mixer ton menu "spécial" avec une disposition "à la Macromédia"... Je ne veux vraiment pas des menus en cascade...


Message édité par Al Batar le 14-09-2003 à 22:02:30
Reply

Marsh Posté le 14-09-2003 à 22:32:54    

Je te conseil de mettre comme événement onclick plutot que onmouseover ...


---------------
mon blog : http://www.magnin-sante.ch/journal/
Reply

Marsh Posté le 14-09-2003 à 22:58:00    

Al Batar a écrit :

Pour Hermes le Messager (de Kro$oft, sans doute ;) pastaper plizzz :D !) :
 
as-tu vérifié que ton script fonctionnait avec autre chose qu'IE ? Parce qu'avec mon Mozilla, ça ne donne rien, alors que mon script (enfin, celui que j'ai repompé sur le site d'O'Reilly), fonctionne...
 
Un grand merci, néanmoins !  


 
Pour Mozilla :
 

Code :
  1. <html>
  2.     <head>
  3.     <link type="text/css" rel="stylesheet" href="test3.css" />
  4.     <script language="JavaScript">
  5.     function test(n) {
  6.     truc =window.getComputedStyle(document.getElementById(n),"" ).getPropertyValue("color" );
  7.     window.alert(truc)
  8.     }
  9.     </script>
  10.     </head>
  11.     <body>
  12.     <div id="toto" onMouseOver="test(this.id)">Toto</div>
  13.     </body>
  14.     </html>

Reply

Marsh Posté le 14-09-2003 à 23:02:17    

Par contre pour Opera 7, je ne vois pour le moment pas de solution...   :sweat:

Reply

Marsh Posté le 16-09-2003 à 10:59:06    

J'avais déjà trouvé pour Mozilla (voir le copier/coller de mon script plus haut) ! C'était juste pour te taquiner, Hermes ;) !
 
Grand merci pour tout, et tant pis pour Opera ;) !

Reply

Marsh Posté le    

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed