11548 sujets

JavaScript, DOM et API Web HTML5

Charger une propriété .CSS au chargement.

Bonjour,

Je possède très peu de connaissance en javascript et je souhaiterais qu'un élément soit masquée par defaut en javascript. Je sais que c'est possible mais je ne connais pas la méthode.

Ca doit pouvoir se faire avec un onLoad ... si quelqu'un à une idée, ce serait sympa.

Merci d'avance,
Gaylord.P. Smiley smile
Bonjour,

Très basique:
window.onload = function() {
	if (document.getElementById("box_community"))
	document.getElementById("box_community").style.display = "none";
}
// (code corrigé suite à remarque de skywalk3r)


Un peu plus évolué:
function cacheElement(id) {
	if (!document.getElementById) return false;
	if (!document.getElementById(id)) return false;
	var element = document.getElementById(id);
	element.style.display = "none";
}
window.onload = function() {
	cacheElement("machin");
	cacheElement("truc");
	cacheElement("bidule");
}


Sinon, le sujet suivant devrait t'inspirer:
http://forum.alsacreations.com/topic-5-31123-1-Feuille-CSS-seulement-si-javascript-desactive.html
Modifié par Florent V. (06 Dec 2007 - 10:22)
Merci d'avoir répondu. Smiley smile

Cependant, j'ai un peu de mal à le mettre en oeuvre ; en fait, c'est pour cette page :
- http://widjoo.com/fr/widjoo,home.html
Il y a actuellement une *div* cachée qui s'affiche uniquement lorsqu'on clique sur "Quoi de neuf sur Widjoo.com ?" ; si cette *div* est cachée par defaut, c'est avec en CSS classique. Je souhaiterais que javascript s'en occupe (comme ça, s'il est désactivé, celà s'affichera quand même).

Actuellement, c'est ceci :

		<div id="box_community" style="display: none;">


J'ai bien essayé *onload="style.display=none"* mais sans succès.
J'admet ne pas connaître grand chose en javascript et j'en suis désolé ... Smiley ravi
Gaylord.P a écrit :
J'admet ne pas connaître grand chose en javascript

Oui, c'est assez clair d'après l'essai que tu as fait.

<hôpital qui se fout de la charité>
Ça ne serait pas idiot de s'y mettre
</hôpital qui se fout de la charité>

Rapidement, tu peux faire quelque chose comme ceci:
<script type="text/javascript">
function cacheElement(id) {
	if (!document.getElementById) return false;
	if (!document.getElementById(id)) return false;
	element = document.getElementById(id);
	element.style.display = "none";
}

window.onload = function() {
	cacheElement("box_community");
	cacheElement("autre_id_à_cacher");
	cacheElement("encore_un_autre");
}
</script>

(Bon, je n'ai les bases de chez bases de Javascript que depuis deux semaines, faudrait que je vérifie que ça passe bien cette histoire.)

Sinon, le sujet que j'indiquais était sympathique. Il proposait de faire ceci:
<script type="text/javascript">
document.documentElement.className+=" hasJS";
</script>

La conséquence sera que l'élément HTML aura, si Javascript est actif, la classe "hasJS", comme si on avait écrit: 
<html lang="fr" class="hasJS">

Du coup, côté CSS, on peut faire:

.hasJS #box_community {display: none;}

Sans JavaScript, la classe "hasJS" sur html n'existe pas, et le style n'est pas appliqué.

Il y a peut-être quelques problèmes avec cette dernière technique (par exemple: on peut détecter ainsi la disponibilité de Javascript, mais ça ne garantit pas que le script qui doit afficher les contenus sera exécuté correctement), mais c'est mieux que de mettre de gros display: none dans la feuille de style sans autre forme de procès.
(Lol, je viens de me rendre compte que j'ai écrit deux fois exactement la même fonction cacheElement! J'avais complètement oublié que je l'avais écrite une fois déjà. Bah, au moins je suis constant, et si je fais des erreurs ça reste les mêmes. Smiley biggol )
Florent V. a écrit :
Bonjour,

Très basique:
window.onload = document.getElementById("machin").style.display = "none";




Ca, ca ne marchera pas parce que la syntaxe est invalide (x=y=z !!!).

Edit (sur la remarque de Julien Royer) : En fait cette syntaxe est valide.
D'après mes tests :
x=y=z;

équivaut à :
x=z;
y=z;

Merci de me dire si je me gourre encore... Smiley lol Smiley lol Smiley lol

Par contre ca ca va marcher : 

window.onload = function(){
if(document.getElementById("box_community"))
document.getElementById("box_community").style.display = "none";
}



Voila, maintenant c'est pas non plus la meilleur façon de gérer les évenements en JS mais c'est la plus rapide et compatible avec ts les navigateurs (du moins a ma connaissance Smiley ravi ) et si tu veux pas te prendre la tete essaie ce bout de code...
Modifié par skywalk3r (06 Dec 2007 - 11:41)
skywalk3r a écrit :
Ca, ca ne marchera pas parce que la syntaxe est invalide (x=y=z !!!).

Non, cette syntaxe est tout à fait valide.

Par contre, le résultat risque de ne pas être tout à fait celui attendu, en effet. Smiley ravi
skywalk3r a écrit :
Ca, ca ne marchera pas parce que la syntaxe est invalide (x=y=z !!!).

Smiley biggol Smiley confused

skywalk3r a écrit :
Par contre ca ca va marcher : 

window.onload = function(){
if(document.getElementById("box_community"))
document.getElementById("box_community").style.display = "none";
}

Je le reprends plus haut pour corriger l'erreur. Smiley smile
Modifié par Florent V. (06 Dec 2007 - 10:20)
Florent V. a écrit :

Oui, c'est assez clair d'après l'essai que tu as fait.

<hôpital qui se fout de la charité>
Ça ne serait pas idiot de s'y mettre
</hôpital qui se fout de la charité>


Pfff' ! Smiley langue
On ne peut pas être bon partout ... Smiley ravi

Le problème qui se pose (car oui, il y en a encore un Smiley rolleyes ) est que la propriété window.onload est déjà utilisé pour un autre script Javascript ... ne peut-on donc pas mettre le window.onload directement dans la balise *<div>*, pour éviter ce problème ? Ou si vous avez une autre solution ... Smiley sweatdrop
Salut,

La solution la plus simple, évoquée par Florent plus haut, est à mon avis la suivante (à améliorer, mais l'idée est là) :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

	<title></title>

	<style type="text/css" media="screen,projection"><!--
		.jsActif #box_community {display: none;}
	--></style>

	<script type="text/javascript"><!--
		document.documentElement.className += " jsActif";
	//--></script>
</head>
<body>

<div id="box_community">
  ...
</div>

</body>
</html>

Sinon, en ce qui concerne l'ajout de plusieurs gestionnaires d'événement "load", la FAQ en parle. Smiley smile
Un attribut onload dans la balise div ne fonctionnera pas...

En effet il y a d'autre solutions,

soit tu ajoutes :

if(document.getElementById("box_community"))
document.getElementById("box_community").style.display = "none";


dans le script qui est deja appelé par le "window.onload", soit tu utilises les fonctions javascript qui permettes d'ajouter plusieurs instructions sur un seul événement mais saches

[debut des embrouilles] que cette fonction n'est pas la meme sur IE et sur FF[/debut des embrouilles]

[fin des embrouilles]et mon conseil est d'utiliser un framework javascript.[/fin des embrouilles]

Personellement j'utilise Mootools. Si tu veux tester tu le telecharge, tu fais l'appel au script externe et tu ajoutes ceci entre tes balises head :

<script language="javascript">
window.addEvent('load',function(){
if(document.getElementById("box_community"))
document.getElementById("box_community").style.display = "none";
});
</script>


Sinon il te reste une dernière solution moins propre mais efficace quand meme, tu ajoutes ceci juste après la fermeture de ta balise div :

<script language="javascript">
if(document.getElementById("box_community"))
document.getElementById("box_community").style.display = "none";
}
</script>


Voila j'espere que tu vas trouver ton bonheur avec ca... Smiley ravi

Edit : En fait utiliser un framework javascript juste pour ca, c'est dommage , meme si mootools est leger.
Modifié par skywalk3r (10 Dec 2007 - 12:16)
Sujet clos
Aller à