Rechercher : dans
Par :

Javascript - Recuperer width div

Dernière réponse le 26 nov 2009 à 16:07:48 Poplio, le 17 aoû 2008 à 14:06:44 
 Signaler ce message aux modérateurs

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.

Configuration: Windows XP
Firefox 3.0.1

Meilleures réponses pour « Javascript Recuperer width div » dans :
Javascript - Date de dernière modification de la page VoirIl est possible, en langage Javascript, d'afficher la date de dernière modification de la page Web grâce à la propriété lastModified de l'objet document :
Javascript - Les variables VoirLe concept de variable Une variable est un objet repéré par son nom, pouvant contenir des données, qui pourront être modifiées lors de l'exécution du programme. En Javascript, les noms de variables peuvent être aussi long que l'on désire,...
Javascript - L'objet Date VoirLes particularités de l'objet Date L'objet Date permet de travailler avec toutes les variables qui concernent les dates et la gestion du temps. Il s'agit d'un objet inclus de façon native dans Javascript, et que l'on peut toujours utiliser. La...

1

Jeff, le 17 aoû 2008 à 14:14:30
  • +1

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> Jeff
webmaster @ comment ca marche . <net|com>

Répondre à Jeff

2

Poplio, le 17 aoû 2008 à 14:17:05

Ehhh beh merci !

Les deux fonctionnent.

Tu n'as changé que ça "style="width:100px;" ?

Répondre à Poplio

3

nEm3sis, le 17 aoû 2008 à 15:11:10

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épondre à nEm3sis

4

Poplio, le 17 aoû 2008 à 16:43:26

Merci pour tes explications.

Répondre à Poplio

5

Lazeurus, le 20 déc 2008 à 21:35:37
  • +1

Même question que Poplio mais pour un width en CSS...
alert('document.getElementById("id").style.width');

alert renvoie ... rien

Répondre à Lazeurus

6

Jeff, le 20 déc 2008 à 22:40:48

Enlève les guillemets !

alert(document.getElementById("id").style.width); 
Jeff
webmaster @ comment ca marche . <net|com>

Répondre à Jeff

7

Friday_XIII, le 26 nov 2009 à 15:24:40

Perso, je n'ai plus de guillemets, mais le alert ne me revoie rien ...

Répondre à Friday_XIII

8

 Atropa, le 26 nov 2009 à 16:07:48

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

Répondre à Atropa