Comment puis-je obtenir les dimensions de l'image d'arrière-plan d'un DIV à l'aide de jQuery ?

Utiliser jQuery pour obtenir les dimensions de l'image d'arrière-plan d'un DIV

Chercher à déterminer les dimensions de l'image d'arrière-plan d'un DIV dans jQuery peut être un un défi, surtout lorsque les méthodes intégrées semblent insuffisantes. Heureusement, il existe une solution qui exploite la puissance des objets Image pour surmonter cet obstacle.

À l'origine, on pensait que la simple ligne "jQuery('#myDiv').css('background-image') .hauteur();" suffirait à récupérer la hauteur de l’image d’arrière-plan. Cependant, cette approche a rencontré une erreur indiquant que le résultat n'était pas une fonction.

La clé du succès réside dans la reconnaissance que les images d'arrière-plan sont stockées sous forme d'URL plutôt que d'images réelles. Pour accéder aux dimensions, nous devons d'abord extraire l'URL. Cela peut être fait à l'aide du code suivant :

var image_url = jQuery('#myDiv').css('background-image').match(/^url\("?(.+?)"?\)$/);

Une fois l'URL obtenue, nous créons un objet Image et chargeons l'image. Une fois chargé, l'objet exposera les dimensions souhaitées :

if (image_url[1]) {
  image_url = image_url[1];
  var image = new Image();

  $(image).load(function() {
    alert(image.width + 'x' + image.height);
  });

  image.src = image_url;
}

Cette méthode garantit que l'image réelle est chargée et que les dimensions sont obtenues avec précision. De plus, il prend en charge diverses formes de désignations d'URL, y compris celles avec des guillemets ou des parenthèses.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!