Les Allergies
Alimentaires
Posez votre question Signaler

Javascript - Recuperer width div [Résolu]

Poplio - Dernière réponse le 30 mars 2011 à 21:32
Bonjour,
je tente désespérément de récupérer la largeur d'un div:
<html>
<head>
<link href="screen.css" rel="stylesheet" type="text/css">
<script type="text/javascript">
function play(){
alert(document.getElementById('header').style.width);
}
</script>
</head>
<body>
<div id="header" width="100px;"> </div>
<input type="button" onclick="javascript:play();">
</body>
</html>
Ca ne me retourne rien!!!
Quelqu'un sait pourquoi ?
Merci.
Lire la suite 

Javascript - Recuperer width div »

9 réponses
Réponse
+5
moins plus
bonjour,

document.getElementById('header').offsetWidth

utilise ça plutôt.

offsetWidth : renvoi la largeur de l'élément

offsetHeight : renvoi la hauteur de l'élément

offsetTop : renvoi la distance entre le bord haut de l'élément et le bord haut de son parent
offsetLeft : renvoi la distance entre le bord haut de l'élément et le bord haut de son parent

voilà un exemple d'utilisation :

calcul la position d'un élément sur la page

			var item = document.getElementById(img);
			var parent = item.offsetParent;
			var posElmX = 0;
			var posElmY = 0;
			while(parent) {
				posElmX += parent.offsetLeft;
				posElmY += parent.offsetTop;
				parent = parent.offsetParent;
			}
			var positionX = item.offsetLeft + posElmX;
			var positionY = item.offsetTop + posElmY;


changer les dimension d'un élément

			item.style.width = item.offsetWidth+10+'px';
						item.style.height = item.offsetHeight+5+'px';
Ajouter un commentaire
Réponse
+3
moins plus
Même question que Poplio mais pour un width en CSS...
alert('document.getElementById("id").style.width');

alert renvoie ... rien
Jeff- 20 déc. 2008 à 22:40
Enlève les guillemets !

alert(document.getElementById("id").style.width); 
Friday_XIII - 26 nov. 2009 à 15:24
perso, je n'ai plus de guillemets, mais le alert ne me revoie rien ...
jpr - 30 mars 2011 à 21:32
mdrrr pas mal avec les simples quotes
Ajouter un commentaire
Réponse
+2
moins plus
en fait le problème était que si tu met
<div id="header" width="100px;">
il fait faire alert(div.width) car ce n'est pas un style

tandis que si tu fait
<div id="header" style="width:100px;">
la c'est un style donc il faut faire alert(div.style.width)
Ajouter un commentaire
Réponse
+1
moins plus
A tout hasard essaye ceci :

<html>
<head>
<link href="screen.css" rel="stylesheet" type="text/css">
<script type="text/javascript">
function play(){
alert(document.getElementById('header').style.width);
}
</script>
</head>
<body>
<div id="header" style="width:100px;"> </div>
<input type="button" onclick="javascript:play();">
</body>
</html> 


Ou encore un peu mieux

<code><html>
<head>
<link href="screen.css" rel="stylesheet" type="text/css">
<script type="text/javascript">
function play(obj){
alert(obj.style.width);
}
</script>
</head>
<body>
<div id="header" style="width:100px;"> </div>
<input type="button" onclick="javascript:play(document.getElementById('header'));">
</body>
</html>
</code>
Ajouter un commentaire
Réponse
+0
moins plus
Ehhh beh merci !

Les deux fonctionnent.

Tu n'as changé que ça "style="width:100px;" ?
Ajouter un commentaire
Réponse
+0
moins plus
Merci pour tes explications.
Ajouter un commentaire
Ce document intitulé « Javascript - Recuperer width div » issu de CommentCaMarche (www.commentcamarche.net) est mis à disposition sous les termes de la licence Creative Commons. Vous pouvez copier, modifier des copies de cette page, dans les conditions fixées par la licence, tant que cette note apparaît clairement.
Dossier à la une
Passage au tout numérique : quel coût pour les particuliers ?