Javascript - Recuperer width div
Résolu
Poplio
-
chabderd Messages postés 1 Date d'inscription Statut Membre Dernière intervention -
chabderd Messages postés 1 Date d'inscription Statut Membre Dernière intervention -
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.
A voir également:
- Width js
- Copiez l'image dans un logiciel d'édition d'images ou un outil en ligne comme js paint ou pixlr e. remplissez les cases en suivant le code couleur. des cases supplémentaires vont se remplir automatiquement. que représente le dessin ? ✓ - Forum Windows
- Arrondi js ✓ - Forum Windows
- Remplir une case de tableau avec une couleur grise avec texture de pointillés ✓ - Forum Photoshop
- Reproduction d'un dessin - Forum Graphisme
- Js/kryptik.ad ✓ - Forum Virus
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