Definir la "width" d'un <div> grace a Javascript

**pierrot10** · 18/01/2007, 15h42

Bonjour
Suis pas trop pro en javascript....
j'ai un code qui recupere la resolution de l'�cran d'un visiteur

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 
<script language="javascript">
<!--
var largeur;
var hauteur;
largeur = screen.width;
hauteur = screen.height;
 
if(largeur>"768"){
largeur="750px";
}else{
largeur="";
}
//-->
</script>

Un gros , Si la reoultion est plus grande que 768, la variable "largeur prend alors la valeur de 750px, qui sera reporter dans le div (voir ci-dessous)
Si non, elle deviens vide

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
<div style="width:[largeur]">hhh</div>

Ma question, comment puis �crire mon code pour que la valeur de "largeur", soit 750px ou "", soit pris en compte, en javascript, dans le width de mon div?

**Auteur** · 18/01/2007, 15h51

bonjour,

affecte � ton div un id, puis :

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
 
document.getElementById("idDuDiv").style.width = largeur +"px";

n'oublie pas l'unit� !

**pierrot10** · 18/01/2007, 17h11

Merci mais il en tiens pas compte

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
 
<script language="javascript">
<!--
var largeur;
var hauteur;
largeur = screen.width;
hauteur = screen.height;
document.write(largeur);
document.write(hauteur);
 
if(largeur>768){
alert('oui');
	document.getElementById('vitrine_center').style.width = "750px";
}else{
	document.getElementById('vitrine_center').style.width = "";
	alert('non');
}	
 
//-->
</script>

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
 
<div id="container">
<div id="vitrine_center"></div>
</div>

Que manque -t-il?

**Macintoc** · 18/01/2007, 17h14

<div id="container"> fait quel largeur ?

**Auteur** · 18/01/2007, 19h06

Envoy� par pierrot10

Merci mais il en tiens pas compte

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
 
<script language="javascript">
<!--
var largeur;
var hauteur;
largeur = screen.width;
hauteur = screen.height;
document.write(largeur);
document.write(hauteur);
 
if(largeur>768){
alert('oui');
	document.getElementById('vitrine_center').style.width = "750px";
}else{
	document.getElementById('vitrine_center').style.width = "";
	alert('non');
}	
 
//-->
</script>

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
 
<div id="container">
<div id="vitrine_center"></div>
</div>

Que manque -t-il?

d'apr�s ce que je vois ton script s'ex�cute au moment du chargement de la page. Or si l'�l�ment n'est pas cr�� au moment de l'ex�cution, ton script ne fonctionne pas. Mets le dans une fonction et appelle le apr�s le chargement de la page :

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
 
<html>
<head>
<title></title>
<script language="javascript">
<!--
function dimDiv()
{
  var largeur;
  var hauteur;
  largeur = screen.width;
  hauteur = screen.height;
 
 
  if(largeur>768)
  {
    alert('oui');
  	document.getElementById('vitrine_center').style.width = "750px";
  }else
  {
  	document.getElementById('vitrine_center').style.width = "";
  	alert('non');
  }
}
//-->
</script>
</head>
 
<body onload="dimDiv()">
<div id="container">
<div id="vitrine_center"></div>
</div>
 
</body>
 
</html>

et supprime les document.write() car dans ton cas ils remplacent tout les �l�ments contenus dans la page par les valeurs largeur et hauteur.

**pierrot10** · 18/01/2007, 19h22

super, merci, ca marche!!

Definir la "width" d'un <div> grace a Javascript

JavaScript

Vue hybride

Partager

Partager