comment connaitre la taille d'un élément

Le
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
Vidéos High-Tech et Jeu Vidéo
Téléchargements
Vos réponses
Gagnez chaque mois un abonnement Premium avec GNT : Inscrivez-vous !
Trier par : date / pertinence
Pascal PONCET
Le #758344
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 " ou dans des documents liés par les balises " 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

ASM
Le #758343
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é

Laurent vilday
Le #758341
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

Laurent vilday
Le #758340
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


--
laurent

ASM
Le #740124
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é


Publicité
Poster une réponse
Anonyme