Discussion :

[ClarusAD]

Bonjour,
Après maintes recherches et essais (tous infructueux), j'ai besoin de votre aide.

J'ai une div dont l'image de fond n'est pas répétée (et bien-sûr je ne connais pas à l'avance cette image, ça aurait été trop simple). Je souhaiterais découvrir les dimensions de cette image.
Voilà comment l’arborescence se présente :

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

HTML > BODY > DIV#myDIV > background-image: url(../foo.png)

J'ai essayé les 3 méthodes suivantes, mais sans succès :

• Code :

  Sélectionner tout - Visualiser dans une fenêtre à part

  var myIMGurl = window.getComputedStyle(myDIV,null).backgroundImage ; //url de l'image, mais pas sa taille ;

• Code :

  Sélectionner tout - Visualiser dans une fenêtre à part

  var myDIVheight = window.getComputedStyle(myDIV,null).getPropertyValue("height"); //hauteur de la div, mais pas de l'image ;

• Code :

  Sélectionner tout - Visualiser dans une fenêtre à part

  var myDIVheight = window.getComputedStyle(myDIV,null).height; //hauteur de la div, mais pas de l'image

[SylvainPV]

La propriété background-image ne change pas les dimensions de l'élément. Il faut soit connaître à l'avance les dimensions, soit utiliser une <img>.

[Watilin]

Sylvain a raison. Par contre il faut juste faire attention au chargement de l'image qui est asynchrone.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
var myDIVheight;
var myDIVwidth;
 
var imageURL = getComputedStyle(myDIV).backgroundImage.replace(/url\((["'])(.*)\1\)/i, "$2");
 
var image = new Image();
image.onload = function(){
   myDIVheight = this.height;
   myDIVwidth = this.width;
}
 
image.src = imageURL;

Autrement il y a getComputedStyle(...).backgroundSize, mais si la propriété n'a pas été donnée explicitement, tu récupèreras "auto auto".

[ClarusAD]

Effectivement : insérer ine balise <img> était la solution ! Voici ce que j'ai donc fait :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
var myIMGvar = document.getElementById('myIMG') ;
var myIMGhgt = window.getComputedStyle(myIMGvar,null).getPropertyValue("height");

Merci à vous deux