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.
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
changer les dimension d'un élément
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';
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)
<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
alert('document.getElementById("id").style.width');
alert renvoie ... rien
A tout hasard essaye ceci :
Ou encore un peu mieux
<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
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