Menu

Javascript - Recuperer width div [Résolu/Fermé]

- - Dernière réponse : chabderd
Messages postés
1
Date d'inscription
mardi 4 décembre 2018
Dernière intervention
4 décembre 2018
- 4 déc. 2018 à 21:14
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.
Afficher la suite 

6 réponses

Meilleure réponse
Messages postés
1946
Date d'inscription
mercredi 25 juin 2008
Dernière intervention
11 mai 2014
20
Merci
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';

Merci Atropa 20

Heureux de vous avoir aidé ! Vous nous appréciez ? Donnez votre avis sur nous ! Evaluez CommentCaMarche

CCM a aidé 29799 internautes ce mois-ci

ATTENTION, offsetWidth & offsetHeight prennent en compte la taille de tes "border",

exemple:
si tu as défini en css

border = 5px;
width=600px;

alors offsetWidth vaudra 610px (600px+ 2*5px)

Les paramètres clientHeight clientWidth te permettent de récupéré la largeur "interne", soit 600px.
Cela peut être intéressant dans certain cas
chabderd
Messages postés
1
Date d'inscription
mardi 4 décembre 2018
Dernière intervention
4 décembre 2018
-
Merci mon ami. tu es génial! je suis beaucoup en retard. Merci beaucoup!
Messages postés
716
Date d'inscription
lundi 20 août 2007
Dernière intervention
9 avril 2012
6
Merci
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)
5
Merci
Même question que Poplio mais pour un width en CSS...
alert('document.getElementById("id").style.width');

alert renvoie ... rien
Jean-François Pillou
Messages postés
18180
Date d'inscription
lundi 15 février 1999
Statut
Expert certifié
Dernière intervention
5 décembre 2018
-
Enlève les guillemets !

alert(document.getElementById("id").style.width); 
> Jean-François Pillou
Messages postés
18180
Date d'inscription
lundi 15 février 1999
Statut
Expert certifié
Dernière intervention
5 décembre 2018
-
perso, je n'ai plus de guillemets, mais le alert ne me revoie rien ...
mdrrr pas mal avec les simples quotes
Messages postés
18180
Date d'inscription
lundi 15 février 1999
Statut
Expert certifié
Dernière intervention
5 décembre 2018
3
Merci
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>
3
Merci
Ehhh beh merci !

Les deux fonctionnent.

Tu n'as changé que ça "style="width:100px;" ?
1
Merci
Merci pour tes explications.