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 jehosrc
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.