11523 sujets

JavaScript, DOM et API Web HTML5

Récupérer la taille d'une div en JS

Bonjour Smiley smile

Existe-il un moyen de récupérer la taille (largeur) d'une div identifée par une class et non par un id ?


<div class="Onglet">
</div>

Existe-il un équivalent de getElementById mais pour les class ?
Pour la largeur quel attribut, offsetWidth, width, ... ?

Merci pour vos pistes...
Modifié par BeliG (25 Apr 2007 - 11:21)
Modérateur
Salut,

Avec quelquechose du genre non ?
var oDiv = document.getElementsByTagName('div'),
    iI = oDiv.length - 1,
    iWidth;

for(; iI >= 0; iI--)
    if(oDiv[iI].className === 'Onglet')
        iWidth = oDiv[iI].offsetWidth;

(à adapter suivant les besoins)

Il n'y a pas de fonction getElementsByClassName ; il faut la créer. Fait une recherche, tu n'es pas le seul dans ce cas.
Et en une ligne y a pas moyen ? Smiley langue

Le but final étant de faire fonctionner le min-width sous IE :


<!--[if lte IE 6]>
	
<style type="text/css">

#menu_pere li div.Onglet {
width: expression([b]taille_de_cet_element[/b] < 88? "90px" : "auto"); }

</style>
		
<![endif]-->

Quelque chose du genre document.getElementsByTagName('div').className('Onglet').offsetWidth c'est pas possible ? ou alors this.element.offsetWidth ? (j'sais pas j'écris nimp hein Smiley ohwell )
Modifié par BeliG (25 Apr 2007 - 11:40)
Modérateur
aCOSwt a écrit :
1/ Juste pour le formalisme, ton div n'est pas identifié par la class.
En effet, dans l'exemple que j'ai donné, iWidth se met à jour à chaque incrémentation de iI. C'est plus pour le principe... Si la classe est définie sur plusieurs éléments et que les besoins sont autres, il faut adapter bien entendu.

a écrit :
2/ Il me semble qu'Olivier a proposé une méthode getElementsByClassName ici :
http://forum.alsacreations.com/topic.php?fid=5&tid=3716
C'est vrai... Je n'ai pas indiqué de lien parce qu'il existe d'autres techniques... un peu plus avancées. (ce n'est pas pour remettre le travail d'Olivier en cause mais bon... je me sens obligé maintenant Smiley cligne )

BeliG a écrit :
Et en une ligne y a pas moyen ? Smiley langue
...
Quelque chose du genre document.getElementsByTagName('div').className('Onglet').offsetWidth c'est pas possible ? ou alors this.element.offsetWidth ? (j'sais pas j'écris nimp hein Smiley ohwell )
Non, ce n'est pas possible... D'une parce que getElementsByTagName te renvoie un tableau mais aussi parce que className ne s'écrit pas ainsi. (this.element.offsetWidth suppose d'autres lignes... ne serait-ce que pour identifier l'élément ayant la classe souhaitée)
Avant de penser à faire concis, il est nécessaire de faire efficace ; l'optimisation n'est pas un travail d'approche.
Bon...

Merci à vous pour ces réponses. Tant pis, les utilisateurs d'IE6 auront des onglets qui s'adapteront à la longeur du texte, sans largeur minimum fixée.
Sujet clos
Aller à