Forum |  HardWare.fr | News | Articles | PC | S'identifier | S'inscrire | Shop Recherche
1991 connectés 

  FORUM HardWare.fr
  Programmation
  HTML/CSS

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

 



 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

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

n°514381
Al Batar
Posté le 14-09-2003 à 17:04:17  profilanswer
 

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
mood
Publicité
Posté le 14-09-2003 à 17:04:17  profilanswer
 

n°514382
Hermes le ​Messager
Breton Quiétiste
Posté le 14-09-2003 à 17:08:53  profilanswer
 

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

n°514407
Al Batar
Posté le 14-09-2003 à 17:31:05  profilanswer
 

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}

n°514429
Hermes le ​Messager
Breton Quiétiste
Posté le 14-09-2003 à 18:08:43  profilanswer
 

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

n°514434
Al Batar
Posté le 14-09-2003 à 18:19:02  profilanswer
 

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
n°514435
sibelius
Vous êtes sûr ?
Posté le 14-09-2003 à 18:20:50  profilanswer
 

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
n°514442
Al Batar
Posté le 14-09-2003 à 18:43:37  profilanswer
 

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

n°514447
Al Batar
Posté le 14-09-2003 à 18:50:14  profilanswer
 

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

n°514450
sibelius
Vous êtes sûr ?
Posté le 14-09-2003 à 18:51:47  profilanswer
 

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
n°514453
Hermes le ​Messager
Breton Quiétiste
Posté le 14-09-2003 à 18:54:53  profilanswer
 

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

mood
Publicité
Posté le 14-09-2003 à 18:54:53  profilanswer
 

n°514459
fadenretur​ns
Posté le 14-09-2003 à 18:58:07  profilanswer
 

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


---------------
mon blog : http://www.magnin-sante.ch/journal/
n°514495
Al Batar
Posté le 14-09-2003 à 19:17:55  profilanswer
 

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. }
  15. function test(n) {
  16. s=getElementStyle(n,"color","color" );
  17. s+="\n";
  18. s+=getElementStyle(n,"backgroundColor","background-color" );
  19. s+="\n";
  20. s+=getElementStyle(n,"fontSize","font-size" );
  21. s+="\n";
  22. s+=getElementStyle(n,"top","top" );
  23. window.alert(s)
  24. }
  25. </script>
  26. </head>
  27. <body>
  28. <div id="toto" onMouseOver="test(this.id)">Toto</div>
  29. </body>
  30. </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: !

n°514512
Al Batar
Posté le 14-09-2003 à 19:35:44  profilanswer
 

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

n°514533
fadenretur​ns
Posté le 14-09-2003 à 20:10:45  profilanswer
 

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/
n°514536
Al Batar
Posté le 14-09-2003 à 20:14:06  profilanswer
 

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

n°514540
Al Batar
Posté le 14-09-2003 à 20:22:04  profilanswer
 

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 !

n°514546
fadenretur​ns
Posté le 14-09-2003 à 20:29:32  profilanswer
 

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/
n°514549
Al Batar
Posté le 14-09-2003 à 20:35:13  profilanswer
 

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

n°514551
fadenretur​ns
Posté le 14-09-2003 à 20:36:22  profilanswer
 

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


---------------
mon blog : http://www.magnin-sante.ch/journal/
n°514568
Al Batar
Posté le 14-09-2003 à 20:49:49  profilanswer
 

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. }
  16. function expand(id) {
  17. var no=parseInt(id.charAt(4))+1;
  18. e=document.getElementById(id);
  19. e.style.backgroundColor="yellow";
  20. while (e=document.getElementById("menu"+no)) {
  21.  e.style.backgroundColor="red";
  22.  e.style.top=parseInt(getElementStyle("menu"+no,"top","top" ))+85;
  23.  no++;
  24. }
  25. }
  26. function reduce(id) {
  27. var no=parseInt(id.charAt(4))+1;
  28. e=document.getElementById(id);
  29. e.style.backgroundColor="cyan";
  30. while (e=document.getElementById("menu"+no)) {
  31.  e.style.backgroundColor="cyan";
  32.  e.style.top=parseInt(getElementStyle("menu"+no,"top","top" ))-85;
  33.  no++;
  34. }
  35. }
  36. //-->
  37. </script>
  38. </head>
  39. <body>
  40. <div id="menu1" class="menu" onMouseOver="expand(this.id)" onMouseOut="reduce(this.id)">
  41. <table>
  42. <tr>
  43. <td class="titre">Menu 1</td>
  44. </tr>
  45. <tr>
  46. <td class="item">Item 1</td>
  47. </tr>
  48. <tr>
  49. <td class="item">Item 2</td>
  50. </tr>
  51. <tr>
  52. <td class="item">Item 3</td>
  53. </tr>
  54. <tr>
  55. <td class="item">Item 4</td>
  56. </tr>
  57. </table>
  58. </div>
  59. <br />
  60. <div id="menu2" class="menu" onMouseOver="expand(this.id)" onMouseOut="reduce(this.id)">
  61. <table>
  62. <tr>
  63. <td class="titre">Menu 2</td>
  64. </tr>
  65. <tr>
  66. <td>Item 1</td>
  67. </tr>
  68. <tr>
  69. <td>Item 2</td>
  70. </tr>
  71. <tr>
  72. <td>Item 3</td>
  73. </tr>
  74. <tr>
  75. <td>Item 4</td>
  76. </tr>
  77. </table>
  78. </div>
  79. <br />
  80. <div id="menu3" class="menu" onMouseOver="expand(this.id)" onMouseOut="reduce(this.id)">
  81. <table>
  82. <tr>
  83. <td class="titre">Menu 3</td>
  84. </tr>
  85. <tr>
  86. <td>Item 1</td>
  87. </tr>
  88. <tr>
  89. <td>Item 2</td>
  90. </tr>
  91. <tr>
  92. <td>Item 3</td>
  93. </tr>
  94. <tr>
  95. <td>Item 4</td>
  96. </tr>
  97. </table>
  98. </div>
  99. <br />
  100. <div id="menu4" class="menu" onMouseOver="expand(this.id)" onMouseOut="reduce(this.id)">
  101. <table>
  102. <tr>
  103. <td class="titre">Menu 4</td>
  104. </tr>
  105. <tr>
  106. <td>Item 1</td>
  107. </tr>
  108. <tr>
  109. <td>Item 2</td>
  110. </tr>
  111. </table>
  112. </div>
  113. <br />
  114. <div id="menu5" class="menu" onMouseOver="expand(this.id)" onMouseOut="reduce(this.id)">
  115. <table>
  116. <tr>
  117. <td class="titre">Menu 5</td>
  118. </tr>
  119. </table>
  120. </div>
  121. <br />
  122. </body>
  123. </html>
  124. <td></td>


 
Voici la CSS temporaire :

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

n°514573
fadenretur​ns
Posté le 14-09-2003 à 20:57:43  profilanswer
 

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/
n°514590
Al Batar
Posté le 14-09-2003 à 21:47:07  profilanswer
 

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
n°514597
fadenretur​ns
Posté le 14-09-2003 à 21:54:30  profilanswer
 

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/
n°514601
Al Batar
Posté le 14-09-2003 à 22:02:11  profilanswer
 

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
n°514610
fadenretur​ns
Posté le 14-09-2003 à 22:32:54  profilanswer
 

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


---------------
mon blog : http://www.magnin-sante.ch/journal/
n°514628
Hermes le ​Messager
Breton Quiétiste
Posté le 14-09-2003 à 22:58:00  profilanswer
 

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>

n°514638
Hermes le ​Messager
Breton Quiétiste
Posté le 14-09-2003 à 23:02:17  profilanswer
 

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

n°515518
Al Batar
Posté le 16-09-2003 à 10:59:06  profilanswer
 

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 ;) !

mood
Publicité
Posté le   profilanswer
 


Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  HTML/CSS

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

 

Sujets relatifs
[ PHP ] PHP et Feuille de Style CSSTransfert bdd free --> OVH [résolu]
[C#] unable to attach to asp.net process [résolu][PHP] Upload de fichier via "input type=file" [résolu : bug a la con]
[CSS] inline et width sur un div[Resolu] Pb Formulaire + PHP -> le bouton Submit rafraichit la page...
[Résolu] Free et upload de fichiers[question stupide] geters/seters [résolu, merci]
[RESOLU] HTML et variable[SQL]+[Access] Jointure externe, j'ai du mal là... :(
Plus de sujets relatifs à : [RÉSOLU] Récupérer attributs définis par CSS externe via JavaScript ?


Copyright © 1997-2018 Hardware.fr SARL (Signaler un contenu illicite / Données personnelles) / Groupe LDLC / Shop HFR