Javascript - Recuperer width div

Résolu
Poplio -  
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

6 réponses

  1. Atropa
    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';
    1. anticolette
      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
    2. chabderd
      Merci mon ami. tu es génial! je suis beaucoup en retard. Merci beaucoup!
  2. nEm3sis
    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)
    1. Lazeurus
      Même question que Poplio mais pour un width en CSS...
      alert('document.getElementById("id").style.width');

      alert renvoie ... rien
      1. Jean-François Pillou Webmaster
        Enlève les guillemets ! 

        alert(document.getElementById("id").style.width);
      2. Friday_XIII
        @Jeffperso, je n'ai plus de guillemets, mais le alert ne me revoie rien ...
      3. jpr
        mdrrr pas mal avec les simples quotes
    2. Jean-François Pillou Webmaster
      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>
      2. Poplio
        Ehhh beh merci !

        Les deux fonctionnent.

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

        Discussions similaires

        Problème d'accès à un site
        DR6993

        4 réponses
        Javascript Arrondi à 2 chiffres après la virgule
        jeremy

        14 réponses
        Avast a détecté JS:Decode-CID[Trj]
        Cmullin

        5 réponses
        javascript arrondi après la virgule
        cap

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

        17 réponses