Sujet Précédent Sujet Suivant

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.

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';
21
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
0
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!
1
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)
7
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
5
Jean-François Pillou Messages postés 18707 Date d'inscription lundi 15 février 1999 Statut Webmaster Dernière intervention 16 février 2023 63 266
20 déc. 2008 à 22:40
Enlève les guillemets ! 

alert(document.getElementById("id").style.width);
0
Friday_XIII > Jean-François Pillou Messages postés 18707 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 ...
0
jpr
30 mars 2011 à 21:32
mdrrr pas mal avec les simples quotes
0
Réponse 4 / 6
Jean-François Pillou Messages postés 18707 Date d'inscription lundi 15 février 1999 Statut Webmaster Dernière intervention 16 février 2023 63 266
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>
3

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Réponse 5 / 6
Poplio
17 août 2008 à 14:17
Ehhh beh merci !

Les deux fonctionnent.

Tu n'as changé que ça "style="width:100px;" ?
3
Réponse 6 / 6
Poplio
17 août 2008 à 16:43
Merci pour tes explications.
1

Discussions similaires

Javascript Arrondi à 2 chiffres après la virgule
jeremy -
gravityaerox -

12 réponses
code couleur associé a une image
magic charly -
pandora -

9 réponses
Faire un echo dans un script JS
CorentinRoche -
CorentinRoche -

6 réponses
Cheval de Troie JS/Kryptik.I
Eliosis -
Eliosis -

12 réponses
'JS/Agent.TS' Qu'est ce que c'est ?
TheFastBoost -
TheFastBoost -

17 réponses