Javascript - Recuperer width div

Résolu/Fermé

Poplio - 17 août 2008 à 14:06
chabderd Messages postés 1 Date d'inscription mardi 4 décembre 2018 Statut Membre 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.

A voir également:

6 réponses

Réponse 1 / 6

Atropa Messages postés 1940 Date d'inscription mercredi 25 juin 2008 Statut Membre Dernière intervention 11 mai 2014 274
26 nov. 2009 à 16:07

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';

anticolette
1 août 2012 à 20:48

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 Statut Membre Dernière intervention 4 décembre 2018 1
4 déc. 2018 à 21:14

Merci mon ami. tu es génial! je suis beaucoup en retard. Merci beaucoup!

Réponse 2 / 6

nEm3sis Messages postés 710 Date d'inscription lundi 20 août 2007 Statut Membre Dernière intervention 9 avril 2012 113
17 août 2008 à 15:11

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)

Réponse 3 / 6

Lazeurus
20 déc. 2008 à 21:35

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 18306 Date d'inscription lundi 15 février 1999 Statut Webmaster Dernière intervention 16 février 2023 63 274
20 déc. 2008 à 22:40

Enlève les guillemets !

alert(document.getElementById("id").style.width);

Friday_XIII > Jean-François Pillou Messages postés 18306 Date d'inscription lundi 15 février 1999 Statut Webmaster Dernière intervention 16 février 2023
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

Réponse 4 / 6

Jean-François Pillou Messages postés 18306 Date d'inscription lundi 15 février 1999 Statut Webmaster Dernière intervention 16 février 2023 63 274
17 août 2008 à 14:14

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>