par
Genova » 16 août 2007, 09:40
Bonjour, pour cacher un champ en Javascript c'est très simple. Tu dois en premier lieu mettre les informations que tu veux cacher dans un block, un div par exemple. Bien sur comme ce div est caché par défaut, il a une CSS display: none. Tu dois aussi mettre une ID à ce DIV, par exemple :
Code : Tout sélectionner
<div id="mon_block" style="display: none">
Informations cachées qui s'afficheront lorsque je cliquerai sur une checkbox
</div>
Ensuite tu dois définir une fonction Javascript (au dessus du block, ou bien dans les balisesw <head>
mais jamais en dessous) :
Code : Tout sélectionner
function afficher_cache_block(id)
{
// Cette ligne déclare une variable e, qui pointera sur le résultat du document.getElementById(id)
// Le document.getElementById(id) permet de dire que tu veux accéder aux informations sur la balise ayant pour id la variable id (que tu passeras en paramètre dans ta fonction)
var e = document.getElementById(id);
// Ici, tu accèdes au style de ta balise donc, et tu modifies la propriété display en lui donnant la valeur 'block' pour qu'elle s'affiche
e.style.display = 'block';
}
Maintenant l'agencement final du code :
Code : Tout sélectionner
<script type="text/javascript">
<!--
function afficher_cache_block(id)
{
// Cette ligne déclare une variable e, qui pointera sur le résultat du document.getElementById(id)
// Le document.getElementById(id) permet de dire que tu veux accéder aux informations sur la balise ayant pour id la variable id (que tu passeras en paramètre dans ta fonction)
var e = document.getElementById(id);
// Ici, tu accèdes au style de ta balise donc, et tu modifies la propriété display en lui donnant la valeur 'block' pour qu'elle s'affiche
e.style.display = 'block';
}
-->
</script>
<input type="checkbox" onclick="afficher_cache_block('mon_block')" /> Afficher
<br />
<div id="mon_block" style="display: none">
Informations cachées qui s'afficheront lorsque je cliquerai sur une checkbox
</div>
Je te laisse comprendre mon code afin de pouvoir cacher / afficher des blocks à gogo dans ton projet.
Bonjour, pour cacher un champ en Javascript c'est très simple. Tu dois en premier lieu mettre les informations que tu veux cacher dans un block, un div par exemple. Bien sur comme ce div est caché par défaut, il a une CSS display: none. Tu dois aussi mettre une ID à ce DIV, par exemple :
[code]<div id="mon_block" style="display: none">
Informations cachées qui s'afficheront lorsque je cliquerai sur une checkbox
</div>[/code]
Ensuite tu dois définir une fonction Javascript (au dessus du block, ou bien dans les balisesw <head> [u]mais jamais en dessous[/u]) :
[code]function afficher_cache_block(id)
{
// Cette ligne déclare une variable e, qui pointera sur le résultat du document.getElementById(id)
// Le document.getElementById(id) permet de dire que tu veux accéder aux informations sur la balise ayant pour id la variable id (que tu passeras en paramètre dans ta fonction)
var e = document.getElementById(id);
// Ici, tu accèdes au style de ta balise donc, et tu modifies la propriété display en lui donnant la valeur 'block' pour qu'elle s'affiche
e.style.display = 'block';
}[/code]
Maintenant l'agencement final du code :
[code]<script type="text/javascript">
<!--
function afficher_cache_block(id)
{
// Cette ligne déclare une variable e, qui pointera sur le résultat du document.getElementById(id)
// Le document.getElementById(id) permet de dire que tu veux accéder aux informations sur la balise ayant pour id la variable id (que tu passeras en paramètre dans ta fonction)
var e = document.getElementById(id);
// Ici, tu accèdes au style de ta balise donc, et tu modifies la propriété display en lui donnant la valeur 'block' pour qu'elle s'affiche
e.style.display = 'block';
}
-->
</script>
<input type="checkbox" onclick="afficher_cache_block('mon_block')" /> Afficher
<br />
<div id="mon_block" style="display: none">
Informations cachées qui s'afficheront lorsque je cliquerai sur une checkbox
</div>[/code]
Je te laisse comprendre mon code afin de pouvoir cacher / afficher des blocks à gogo dans ton projet.