11528 sujets

JavaScript, DOM et API Web HTML5

Afficher/cacher une div

Bonjour a tous !

J'ai un soucis et je suis sur que la solution est toute bête. J'ai un fichier .js et un fichier .html

Dans mon .html j'appelle mon fichier .js avec la balise script dans le head et dans le body dans une balise buton, j'ai un onClick avec l'appelle de ma fonction JS.

Dans mon JS j'ai ça : 

function Aff_Admin()
{
	AjtProd = document.getElementById("DivFormAjoutProd");
	//alert(AjtProd) ;
        if(AjtProd.style.visibility=="visible")
        {
			alert("test");
               AjtProd.style.visibility="hidden";
        }

}


Mon premier Alert il marche, le résultat est une boite avec Objet DivElement, donc oui c'est bien une div.. mais le soucis c'est qu'il rentre même pas dans ma condition (mon deuxième alert ne s'affiche pas).. Pourtant ma div est bien visible.. mais ça veut pas aller dans la condition.

Une idée pour m'éclaircir ? Smiley smile


Merci
Cordialement,
Hello.

Element.style.visibility donne "" de ce que j'ai testé.

Au passage, changer les styles via JS, ce n'est pas ce qu'il y a de plus clean. Mieux vaux les définir via CSS et jouer sur des changements de classes.
Salut,

Tu propose que par exemple j'ai deux classe une spécial HIDDEN une autre spécial VISIBLE et qu'avec JS je change de classe la div en question ? (si j'ai bien compris ^^)
Je suis d'accord avec Florian, il est préférable de passer par des classes.

L'attribut style du DOM contient l'équivalent de la valeur de l'attribut HTML style. Il ne contient pas les valeurs calculées mais seulement les valeurs définies en ligne (vides par défaut).

P.S. : tu aurais pu constater seul que "AjtProd.style.visibility" était vide en poussant tes tests un peu plus loin.
Modifié par Julien Royer (19 Jun 2012 - 15:32)
JuseN a écrit :
Tu propose que par exemple j'ai deux classe une spécial HIDDEN une autre spécial VISIBLE et qu'avec JS je change de classe la div en question ? (si j'ai bien compris ^^)

Une classe "hidden" (par exemple) devrait suffire.
Salut,

Oué je vais voir pour passer par des classes si c'est préférable

Mais par contre mon alert m'afficher dans la box quelque chose du genre " Objet XHTML DivElement " je me suis dit qu'elle été pas vide.. après je me trompe surement.
JuseN a écrit :
Mais par contre mon alert m'afficher dans la box quelque chose du genre " Objet XHTML DivElement " je me suis dit qu'elle été pas vide.. après je me trompe surement.

Ton alert prenait comme paramètre "AjtProd" et non "AjtProd.style.visibility".
ahh d'accord.. merci.


Du coup une seul classe hidden, que j'applique sur mes div avec un script, au moment où je clic sur un bouton .. Mais du coup, si j'hidden (je sais ça se dit pas) ma première div, et qu'ensuite j'hidden (vraiment désolé) ma deuxième div, la première le sera toujours ?

Du coup il me faudrait deux fonction, une qui applique la classe hidden et une qui "remet" l'ancienne classe, ou le tout en une ?....
JuseN a écrit :
Du coup il me faudrait deux fonction, une qui applique la classe hidden et une qui "remet" l'ancienne classe, ou le tout en une ?....
Idéalement, en singeant l'API de jQuery : hasClass, addClass, removeClass, toggleClass. Mais ce n'est qu'une façon de procéder, à toi de voir selon tes besoins.
Salut, voici un petit exemple de bascule (flip / flop) pour afficher masquer à partir du clic d'un bouton, une balise contenant du texte par exemple.
<!doctype html>
<html>
<head>
<title></title>

<script type="text/javascript">
function flipflop ()
{
	if (addr.id == "flip")	addr.id = "flop";
	else			addr.id = "flip";
}

window.onload = function () {
	addr = document.getElementById("flip");
}
</script>


<style type="text/css">
#flip {	visibility : visible;	}
#flop {	visibility : hidden;	}
</style>
</head>

<body>
	<button onclick="flipflop();">afficher / masquer</button>
	<div id="flip">bla bla bla bla</div>
</body>
</html>

Modifié par tournikoti (20 Jun 2012 - 16:55)
Sujet clos
Aller à