11548 sujets

JavaScript, DOM et API Web HTML5

Connaitre la valeur d'un atribu CSS grace à javascript

Bonjour à tous

Voilà mon probleme :

j'ai deux div, dont je switch la visibilité grace à un onclick sur un lien et ces deux fonction :

	function changepourobj () {
		document.getElementById('id_publique_login').style.display = 'none';
		document.getElementById('id_publique_objectifs').style.display = 'block';
	}
	function changepourlog () {
		document.getElementById('id_publique_objectifs').style.display = 'none';
		document.getElementById('id_publique_login').style.display = 'block';
	}


Jusque là, tout marche tres bien, cepandant, par défaut, le display des deux div est sur "none", il faut donc, dans ce cas, que j'en affiche une par défaut, et voilà ce que j'ai tenté :

	function affiche () {
		if ((document.getElementById('id_publique_login').style.display == 'none') && (document.getElementById('id_publique_objectifs').style.display == 'none')) {
			document.getElementById('id_publique_login').style.display = 'block';
		}
	}


j'appelle cette fonction dans le onload de la balise body, mais celà ne marche pas...

Merci d'avance pour votre aide, car là, ça fait un bon moment que je patine !
Modifié par Assimil (27 Jun 2007 - 13:41)
Si tu es sous firefox, regarde dans outils->console d'erreurs pour voir si déjà des problèmes sont rencontrés lors du chargement de ta page .

D'autre part dans ton fichier CSS, les attributs display des éléments que tu cites sont-ils initialisés?
-> dans la console d'erreur, aucun probleme

-> oui, les valeurs testé sont initialisé sur none (sinon, je ne voi pas l'interret...)

-> effet identique sous IE et sous Firefox : ça marche pas...

Mauvaise sintaxe ? impossibilité de controlé les valeur CSS depuis JS ? comment faire ?

Merci d'avance

à préciser : quand je fait un document.write(document.getElementById('id_publique_login').style.display); dans la fonction qui ne marche pas, ça ne m'affiche rien, alor que si je fait un document.write('test'), ça m'affiche test... par contre, si je met le document.write('test') dans le if, que dalle...
Modifié par Assimil (27 Jun 2007 - 17:33)
Bonjour,

Ce que element.style.display détecte, c'est un style CSS en ligne comme dans :

<p style="display: none;">Je suis bien caché!</p>


pas une propriété assignée par une règle dans la feuille de style. La propriété style d'un élément HTML n'est pas à comprendre comme le style appliqué à cet élément, mais comme son attribut style. Donc dans ton cas, element.style.display a la valeur undefined et non pas 'none'.
Je comprends pas bien ton probleme, mais pour faire apparaitre ou disparaitre une div j'utilises style.visibility ="visible" et style.visibility ="hidden" ca peut peut-etre t'aider.
Lanza a écrit :
Bonjour,
[/code]

pas une propriété assignée par une règle dans la feuille de style. La propriété style d'un élément HTML n'est pas à comprendre comme le style appliqué à cet élément, mais comme son attribut style. Donc dans ton cas, element.style.display a la valeur undefined et non pas 'none'.


Ok, merci bien, je l'ai suspécté à un moment, mais je ne sais pas pourquoi, ça m'est sorti de la tête ^^

Est ce que c'est possible de controler ce qui est assigner par le fichier CSS ? je n'aime pas trop mettre du CSS dans le XHTML... c'est pas bô

Krafton -> Merci à toi, mais j'ai besoin d'utiliser display dans ce cas, et de toute façon, ça ne changerais rien à mon probleme (j'ai déjà essayé... au cas ou Smiley cligne )
Assimil a écrit :


Ok, merci bien, je l'ai suspécté à un moment, mais je ne sais pas pourquoi, ça m'est sorti de la tête ^^

Est ce que c'est possible de controler ce qui est assigner par le fichier CSS ? je n'aime pas trop mettre du CSS dans le XHTML... c'est pas bô


C'est assez vrai. Il y a plusieurs solutions à ton problème :
- aller chercher la propriété de la feuille de style qui va bien. Assez fastidieux à mon avis, mais c'est faisable, si ma mémoire est bonne en accédant à document.stylesheets[] puis en recherchant la règle qui correspond.

- changer tes tests en remplaçant == 'none' par != 'block'. Mais ça ne paraît pas très très solide.

- Assigner l'attribut style.display à 'none' par javascript au chargement de la page, plutôt que de les cacher dans la CSS. C'est sans doute la meilleure façon de procéder, puisqu'ainsi, si javascript est désactivé pour une raison X ou Y, tes éléments restent accessibles.
Modifié par Lanza (27 Jun 2007 - 17:52)
Lanza a écrit :

ainsi, si javascript est désactivé pour une raison X ou Y, tes éléments restent accessibles.


Mais justement, c'est le contraire de ce que je recherche : si le client n'a pas javascript, les éléments doivent rester invisibles, tandis qu'un beau message disant que JS doit être activé, lui reste visible (j'ai une regle JS pour le masquer au onload)

Sinon, pour le reste, il me semblais bien qu'il y avais un moyen avec document.stylesheets['la_feuille_que_je_veux.css'], mais le probleme, c'est que je ne vois pas trop la syntaxe que je peut mettre derière pour trouver ce que je veux dedans... comment identifier les classe et les id et les balises, et choisir le bon truc parmis tout ça...
Assimil a écrit :


Mais justement, c'est le contraire de ce que je recherche : si le client n'a pas javascript, les éléments doivent rester invisibles, tandis qu'un beau message disant que JS doit être activé, lui reste visible (j'ai une regle JS pour le masquer au onload)


Ah euuuh... C'est pas un beau message. On ne devrait pas avoir à activer Javascript pour utiliser un site.

Pour le moyen d'accéder aux feuilles de styles, je ne sais plus. Si tu lis bien l'anglais essaie de comprendre ce qu'il y a là : http://www.w3.org/TR/DOM-Level-2-Style/
Modifié par Lanza (27 Jun 2007 - 18:21)
Lanza a écrit :

Ah euuuh... C'est pas un beau message. On ne devrait pas avoir à activer Javascript pour utiliser un site.


Tout à fait d'accord avec toi, sauf que dans ce cas là, ce n'est pas un site, mais un progiciel. à partir de là, on connais les utilisateur, et on maitrise leur environnement, et comme plusieurs donctionnalités dépendandent de JS...

Et sans vouloir être méchant, c'est quand meme moin contraignant que de fournir un progiciel qui ne fonctionne que sous windows, et ou l'on doit avoir les droit administrateurs pour l'installer.

Sinon, pour la spec dom de CSS, ça ne m'aide pas beaucoup, si quelqu'un connais la syntaxe pour JS, merci d'avance.

Mais en tout cas, je te remerci, car tu m'a bien aidé : en attedant, je met le CSS dans le XHTML, faute de mieux, et au moin, ça marche ^^
Modifié par Assimil (27 Jun 2007 - 18:46)
Sujet clos
Aller à