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

Partager

Partager