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
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
6 réponses
Atropa
Messages postés
1935
Date d'inscription
mercredi 25 juin 2008
Statut
Membre
Dernière intervention
11 mai 2014
272
26 nov. 2009 à 16:07
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
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';
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
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)
<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
Jean-François Pillou
Messages postés
18670
Date d'inscription
lundi 15 février 1999
Statut
Webmaster
Dernière intervention
16 février 2023
63 282
20 déc. 2008 à 22:40
20 déc. 2008 à 22:40
Enlève les guillemets !
alert(document.getElementById("id").style.width);
Friday_XIII
>
Jean-François Pillou
Messages postés
18670
Date d'inscription
lundi 15 février 1999
Statut
Webmaster
Dernière intervention
16 février 2023
26 nov. 2009 à 15:24
26 nov. 2009 à 15:24
perso, je n'ai plus de guillemets, mais le alert ne me revoie rien ...
Jean-François Pillou
Messages postés
18670
Date d'inscription
lundi 15 février 1999
Statut
Webmaster
Dernière intervention
16 février 2023
63 282
17 août 2008 à 14:14
17 août 2008 à 14:14
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
1 août 2012 à 20:48
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
4 déc. 2018 à 21:14