Získat velikost obrázku na pozadí CSS pomocí JavaScriptu?

Je možné použít JavaScript k získání skutečné velikosti (šířka a výška v pixelech) obrázku na pozadí odkazovaného na CSS?

Odpověď

Ano, a udělal bych to takto…

window.onload = function () {
  var imageSrc = document
    .getElementById('hello')
    .style.backgroundImage.replace(/url((['"])?(.*?)1)/gi, '$2')
    .split(',')[0];

  // I just broke it up on newlines for readability

  var image = new Image();
  image.src = imageSrc;

  image.onload = function () {
    var width = image.width,
      height = image.height;
    alert('width =' + width + ', height = ' + height);
  };
};

Několik poznámek…

  • Musíme odstranit url() část, kterou JavaScript vrací, aby získal správný zdroj obrázku. Musíme se rozdělit na , v případě, že prvek má více obrázků na pozadí.
  • Vytváříme nový Image objekt a nastavte jeho src na nový obrázek.
  • Potom můžeme přečíst šířku a výšku.

jQuery by pravděpodobně mnohem méně bolela hlava, než začít.