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

Recherche :

Mot : Pseudo : Filtrer
Bas de page
Auteur	Sujet : [RÉSOLU] Récupérer attributs définis par CSS externe via JavaScript ?

Al Batar

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

Publicité

Hermes le Messager

Breton Quiétiste

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

Al Batar

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 :

<html>
<head>
<script language="JavaScript">
function test(n) {
window.alert(document.getElementById(n).style.color)
}
</script>
</head>
<body>
<div id="toto" style="color:red" onMouseOver="test(this.id)">Toto</div>
</body>
</html>

Les codes suivants échouent, en revanche !

test2.html :

Code :

<html>
<head>
<style type="text/css">
#toto {color:red}
</style>
<script language="JavaScript">
function test(n) {
window.alert(document.getElementById(n).style.color)
}
</script>
</head>
<body>
<div id="toto" onMouseOver="test(this.id)">Toto</div>
</body>
</html>

test3.html :

Code :

<html>
<head>
<link type="text/css" rel="stylesheet" href="test3.css" />
<script language="JavaScript">
function test(n) {
window.alert(document.getElementById(n).style.color)
}
</script>
</head>
<body>
<div id="toto" onMouseOver="test(this.id)">Toto</div>
</body>
</html>

et sa CSS externe, test3.css :

Code :

#toto {color:red}

Hermes le Messager

Breton Quiétiste

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

Al Batar

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

sibelius

Vous êtes sûr ?

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

Al Batar

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

Al Batar

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

sibelius

Vous êtes sûr ?

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

Hermes le Messager

Breton Quiétiste

Le problème est résolu :

Code :

<html>
<head>
<link type="text/css" rel="stylesheet" href="test3.css" />
<script language="JavaScript">
function test(n) {
window.alert(document.getElementById(n).currentStyle.color)
}
</script>
</head>
<body>
<div id="toto" onMouseOver="test(this.id)">Toto</div>
</body>
</html>

Publicité

fadenreturns

petit coup de pub habituel

http://www.magnin-sante.ch/journal [...] .php&id=87

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

Al Batar

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

test3.html

Code :

<html>
<head>
<link type="text/css" rel="stylesheet" href="test3.css" />
<script language="JavaScript">
function getElementStyle(elemID, IEStyleProp, CSSStyleProp) {
var elem = document.getElementById(elemID);
if (elem.currentStyle) {
return elem.currentStyle[IEStyleProp];
} else if (window.getComputedStyle) {
var compStyle = window.getComputedStyle(elem, "" );
return compStyle.getPropertyValue(CSSStyleProp);
}
return "";
}
function test(n) {
s=getElementStyle(n,"color","color" );
s+="\n";
s+=getElementStyle(n,"backgroundColor","background-color" );
s+="\n";
s+=getElementStyle(n,"fontSize","font-size" );
s+="\n";
s+=getElementStyle(n,"top","top" );
window.alert(s)
}
</script>
</head>
<body>
<div id="toto" onMouseOver="test(this.id)">Toto</div>
</body>
</html>

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

Code :

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

Voili voilou, et merci à tous :hello: !

Al Batar

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

fadenreturns

Al Batar a écrit :

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

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

Al Batar

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 !

Al Batar

Pour Hermes le Messager (de Kro$oft, sans doute pastaper plizzz !) :

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 !

fadenreturns

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/

Al Batar

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

fadenreturns

Comment ça en vertical ?

Je comprend de moins en moins :sweat: ...

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

Al Batar

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

Code :

<html>
<head>
<link rel="stylesheet" type="text/css" href="testOngletsJavaScript.css" />
<script >
<!--
function getElementStyle(elemID, IEStyleProp, CSSStyleProp) {
var elem = document.getElementById(elemID);
if (elem.currentStyle) {
return elem.currentStyle[IEStyleProp];
} else if (window.getComputedStyle) {
var compStyle = window.getComputedStyle(elem, "" );
return compStyle.getPropertyValue(CSSStyleProp);
}
return "";
}
function expand(id) {
var no=parseInt(id.charAt(4))+1;
e=document.getElementById(id);
e.style.backgroundColor="yellow";
while (e=document.getElementById("menu"+no)) {
e.style.backgroundColor="red";
e.style.top=parseInt(getElementStyle("menu"+no,"top","top" ))+85;
no++;
}
}
function reduce(id) {
var no=parseInt(id.charAt(4))+1;
e=document.getElementById(id);
e.style.backgroundColor="cyan";
while (e=document.getElementById("menu"+no)) {
e.style.backgroundColor="cyan";
e.style.top=parseInt(getElementStyle("menu"+no,"top","top" ))-85;
no++;
}
}
//-->
</script>
</head>
<body>
<div id="menu1" class="menu" onMouseOver="expand(this.id)" onMouseOut="reduce(this.id)">
<table>
<tr>
<td class="titre">Menu 1</td>
</tr>
<tr>
<td class="item">Item 1</td>
</tr>
<tr>
<td class="item">Item 2</td>
</tr>
<tr>
<td class="item">Item 3</td>
</tr>
<tr>
<td class="item">Item 4</td>
</tr>
</table>
</div>
<br />
<div id="menu2" class="menu" onMouseOver="expand(this.id)" onMouseOut="reduce(this.id)">
<table>
<tr>
<td class="titre">Menu 2</td>
</tr>
<tr>
<td>Item 1</td>
</tr>
<tr>
<td>Item 2</td>
</tr>
<tr>
<td>Item 3</td>
</tr>
<tr>
<td>Item 4</td>
</tr>
</table>
</div>
<br />
<div id="menu3" class="menu" onMouseOver="expand(this.id)" onMouseOut="reduce(this.id)">
<table>
<tr>
<td class="titre">Menu 3</td>
</tr>
<tr>
<td>Item 1</td>
</tr>
<tr>
<td>Item 2</td>
</tr>
<tr>
<td>Item 3</td>
</tr>
<tr>
<td>Item 4</td>
</tr>
</table>
</div>
<br />
<div id="menu4" class="menu" onMouseOver="expand(this.id)" onMouseOut="reduce(this.id)">
<table>
<tr>
<td class="titre">Menu 4</td>
</tr>
<tr>
<td>Item 1</td>
</tr>
<tr>
<td>Item 2</td>
</tr>
</table>
</div>
<br />
<div id="menu5" class="menu" onMouseOver="expand(this.id)" onMouseOut="reduce(this.id)">
<table>
<tr>
<td class="titre">Menu 5</td>
</tr>
</table>
</div>
<br />
</body>
</html>
<td></td>

Voici la CSS temporaire :

Code :

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

fadenreturns

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/

Al Batar

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

fadenreturns

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/

Al Batar

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

fadenreturns

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

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

Hermes le Messager

Breton Quiétiste

Al Batar a écrit :

Pour Mozilla :

Code :

<html>
<head>
<link type="text/css" rel="stylesheet" href="test3.css" />
<script language="JavaScript">
function test(n) {
truc =window.getComputedStyle(document.getElementById(n),"" ).getPropertyValue("color" );
window.alert(truc)
}
</script>
</head>
<body>
<div id="toto" onMouseOver="test(this.id)">Toto</div>
</body>
</html>

Hermes le Messager

Breton Quiétiste

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

Al Batar

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 !

Publicité

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

Page générée en 0.136 secondes