Logo GNT
Actualités Tests & Guides Bons Plans
Twitter iPhone pliant OnePlus 11 PS5 Disney+ Orange Livebox Windows 11
Entraide Développement Développement Langage JavaScript comment connaitre la taille d'un élément

comment connaitre la taille d'un élément

5 réponses
Avatar
rico
bonjour,

Une question toute bête pour le débutant que je suis: comment connaitre la
taille d'un élément ?

Si j'ai défini la taille via un style en ligne pas de problème, mais si
c'est via une déclaration css, je ne vois pas.
Y a-t-il une méthode unique, quelque soit le type de déclaration ?

un exemple ? oui bien sûr:

<html>
<head>
<style>
#el2{
background: orchid;
width: 240px;
}
</style>
<script>
function testwidth(){
alert(document.getElementById('el1').style.width);
alert(document.getElementById('el2').style.width);
}
</script>
</head>
<body>
<div id="el1" style="background: red; width: 120px;">div1</div>
<br>
<div id="el2">div2</div>
<br>
<button onclick="testwidth();">tester</button>
</body>
</html>

merci,
rico
Signaler un problème avec ce contenu

5 réponses

Supprimer
Cette action est irreversible, confirmez la suppression du commentaire ?
Signaler le commentaire

Veuillez sélectionner un problème

Nudité
Violence
Harcèlement
Fraude
Vente illégale
Discours haineux
Terrorisme
Autre
Avatar
Pascal PONCET
Si j'ai défini la taille via un style en ligne pas de problème, mais si
c'est via une déclaration css, je ne vois pas.
Y a-t-il une méthode unique, quelque soit le type de déclaration ?


Pas à ma connaissance.

Il est vrai que la propriété "style" d'un élément ne retourne que ce qui
a été défini en ligne avec l'attribut "style" de l'élément, CQFD.

Pour lire les valeurs de style déclarées dans les balises "<style ...>"
ou dans des documents liés par les balises "<link rel="stylesheet"...>",
il n'y a qu'un moyen : scanner successivement les tableaux
"document.styleSheets" puis "styleSheets.cssRules" (Firefox) ou
"styleSheets.rules" (MSIE) et tester le contenu des règles.

Bref, c'est grosse galère.
Il faut peut-être aller voir du côté des librairies à la mode, genre
"jsQuery", "Prototype" ou "Scriptaculous" qui intègrent éventuellement
ce genre de fonction.

Bonne chance, Pascal

Avatar
ASM
bonjour,

Une question toute bête pour le débutant que je suis: comment connaitre la
taille d'un élément ?


Tu peux facilement connaître la taille d'affichage d'une image
w = document.images[1].width;
si elle n'a pas été redimensionnée (par css)

Normalement, on n'a pas à connaître la taille d'un élément, si par
"élément" tu entends un conteneur (une boîte) tel qu'un div comme dans
ton exemple.
Pourquoi ?
Parce que l'utilisateur peut faire afficher avec un grossissement ou son
contraire et que le conteneur, s'il n'est pas fixé en dimensions, peut
adapter sa taille (au moins à minima en hauteur) en fonction du contenu.

A contrario, si tu as dimensionné un conteneur tu n'es pas assuré que
son contenu n'en débordera pas.

Pour garder une homogénéité de l'ensemble conteneur+contenus il devrait
dès lors suffire de tout dimensionner en proportionnel (en %).
D'en connaître la taille après coup n'a plus d'importance.

Si j'ai défini la taille via un style en ligne pas de problème, mais si
c'est via une déclaration css, je ne vois pas.
Y a-t-il une méthode unique, quelque soit le type de déclaration ?


Pour les éléments supposés dimensionnés, après avoir testé que l'élément
n'a pas de style ou pas de style de taille, tu peux faire éplucher la
feuille de style via JavaScript à la recherche de cette taille comme
expliqué par Pascal.


--
Stephane Moriaux et son (moins) vieux Mac déjà dépassé

Avatar
Laurent vilday
Normalement, on n'a pas à connaître la taille d'un élément, si par
"élément" tu entends un conteneur (une boîte) tel qu'un div comme dans
ton exemple.
Pourquoi ?
Parce que l'utilisateur peut faire afficher avec un grossissement ou son
contraire et que le conteneur, s'il n'est pas fixé en dimensions, peut
adapter sa taille (au moins à minima en hauteur) en fonction du contenu.


Euh, pas d'accord. On a (euh j'ai ... :), dans un appli web tout au
moins, de plus en plus besoin de connaitre les tailles d'un élément et
le redimensionnement des polices n'empêche en rien le besoin.

Dans mon appli principale j'ai régulièrement besoin de connaitre les
tailles des éléments, pour déterminer par exemple :
- la taille d'une fenêtre (en DIV va s'en dire) sur la page (desktop),
- la position d'un icone en taille variable défini par l'utilisateur
sur la page (desktop),
- si un sous sous sous menu ne s'afficherait pas en dehors de la zone
de restitution,
- si un élément drag/droppé est en place,
- la position d'un élément lorsque le souris mouseover un autre,
- la taille dynamique d'une tabulation parmi X autres dans une fenêtre
(celle dont je parlais au début) dont la taille (de la fenetre) est
définie par le user,
- etc.

--
laurent

Avatar
Laurent vilday
Une question toute bête pour le débutant que je suis: comment connaitre la
taille d'un élément ?
Si j'ai défini la taille via un style en ligne pas de problème, mais si
c'est via une déclaration css, je ne vois pas.
Y a-t-il une méthode unique, quelque soit le type de déclaration ?


C'est pas du standard W3C, c'est défini par le standard microsoft. Mais
à ce que j'en sais, en faisant attention au mode quirks/strict de la
page, ils (les navigateurs) exposent tous à peu pr_s uniformément ces
propriétés :
- offsetWidth
- offsetHeight

<http://developer.mozilla.org/en/docs/DOM:element.offsetWidth>
<http://msdn.microsoft.com/workshop/author/dhtml/reference/properties/offsetwidth.asp>
<http://www.quirksmode.org/viewport/compatibility.html>

--
laurent

Avatar
ASM
Normalement, on n'a pas à connaître la taille d'un élément, si par
"élément" tu entends un conteneur (une boîte) tel qu'un div comme dans
ton exemple.
(...)


Euh, pas d'accord.
(...)

Dans mon appli principale


On peut voir ?

--
Stephane Moriaux et son (moins) vieux Mac déjà dépassé