Javascript - Recuperer width div
Résolu
Poplio
-
chabderd Messages postés 1 Statut Membre -
chabderd Messages postés 1 Statut Membre -
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.
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
-
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';
-
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 -
-
-
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) -
Même question que Poplio mais pour un width en CSS...
alert('document.getElementById("id").style.width');
alert renvoie ... rien -
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> -
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question -
-
