Récupération des dimensions d'un div sous OpéraRésolu

Question

Bonjour

J'ai écris une fonction permettant de récupérer les dimensions d'un élément HTML.
Pour cela, il faut créer un élément avec createElement et le passer en paramètre à la fonction getDimension.
Cette fonction se contente juste d'ajouter l'élément dans le document, de récupérer ses dimensions et de le supprimer.

Exemple d'utilisation :

var spanLibelle = document.createElement("span");
spanLibelle.id = "spanLibelle";
spanLibelle.className = "libelleCategorie";
spanLibelle.innerHTML = "Mon libellé";
var dimensionLibelle = getDimension(spanLibelle);

...

// Objet dimension
function Dimension(width, height){
    this.width = width;
    this.height = height
}

// Méthode de récupération des dimensions d'un élément
function getDimension(element){

    // Affecte un ID par défaut à l'élément s'il n'en a pas
    if (!element.id) element.id = "testDimension";
    
    // Ajoute l'élément au document
    document.body.appendChild(element);
    
    // Récupère les dimensions de l'élément
    var dimension = new Dimension(
            document.getElementById(element.id).offsetWidth,
            document.getElementById(element.id).offsetHeight);
    
    // Supprime l'élément du document
    document.body.removeChild(element);
    
    return dimension;
    
}

Ca marche très bien avec Internet Explorer et Firefox, par contre sous Opéra j'obtiens des dimensions nulles !

Savez-vous pourquoi et comment y remédier ?

Merci de votre aide

cs_flexx · Accepted Answer

Salut

Oui, en fait, ma source généralise la sienne qui ne récupère que les dimensions d'un texte.

Le problème que j'avais était que sous Opera, les dimensions d'un texte étaient tout le temps nulles !

J'ai résolu le problème en spécifiant le style "position: absolute" de l'élément passé en paramètre.

A+

PetoleTeam · Answer

B
onjour...
voir peut être http://www.javascriptfr.com/codes/RECUPERER-LARGEUR-AFFICHAGE-TEXTE_41737.aspx
mais je ne pense pas avoir bien compris...
;0)

PetoleTeam · Answer

B
onsoir...
Merci pour l'info...




Sous Opéra je n'est pas noté de dimensions nulles, peut être qu'Opéra attend la balise de fin de  pour autoriser la lecture en absence de positionnement précis.





Pourquoi récupérer les dimensions d'un élément que l'on n'utilise pas, puisque remover du body?




On est bien obligé d'attendre peut être pas la fin du chargement, mais au moins le chargement de la balise , à preuve le document.body.appendChild().









...ma source généralise...


En ce qui concerne la généralisation il me semble qu'il y à 
//---------------------------
function Get_Dimension( obj_){
  return([ obj_.offsetWidth, obj_.offsetHeight]);
}

qui fonctionne quelque soit l'objet que l'on passe...





...la sienne qui ne récupère que les dimensions d'un texte...



OUI c'est une demande fréquente lorsque l'on veut calculer par exemple les dimensions d'une bannière.



En ce qui concerne ta fonction
il est inutile d'affecter un ID à l'élément, l'appel à element.offsetWidth et element.offsetHeight étant suffisant...



function getDimension(element){
  document.body.appendChild(element);




  // Récupère les dimensions de l'élément

  var dimension = new Dimension(
    element.offsetWidth,
    element.offsetHeight);




  // Supprime l'élément du document

  document.body.removeChild(element);
  return dimension;
}
Mais je n'ai peut être pas très bien saisi la finalité de tout cela...








;0)

cs_flexx · Answer

Oui, en effet, il n'est pas utile d'affecter un id.
Cela résultait de précédents tests que je faisais :)

Sinon, le but est de pouvoir connaitre la dimension d'objets HTML étant utilisés dans la réalisation de composants javascript.

Récupération des dimensions d'un div sous Opéra

4 réponses

Votre réponse

Discussions similaires