獲取背景圖像的尺寸

我試圖獲取元素的背景圖像的寬度和高度。當你點擊它時，它應該在元素內顯示它（在這種情況下爲「200 300」）。獲取背景圖像的尺寸

HTML：

<div id='test'></div>

CSS：

#test { 
    width: 100px; height: 100px; 
    background-image: url(http://placehold.it/200x300); 
}

的JavaScript：

$('#test').on('click', function() { 
    $(this).text(getDimensions($(this))); 
}); 

var getDimensions = function(item) { 
    var img = new Image(); //Create new image 
    img.src = item.css('background-image').replace(/url\(|\)$/ig, ''); //Source = clicked element background-image 
    return img.width + ' ' + img.height; //Return dimensions 
};

這裏的Fiddle。問題是隻有在Chrome中，才起作用，所有其他主要瀏覽器都返回「0 0」。我不知道是什麼原因。這個圖形是不是完全加載？

來源

2013-06-21 Robert Kirsz

問題是某些瀏覽器向CSS添加了引號，並且它試圖加載（在小提琴的情況下）「http://fiddle.jshell.net/_display/%22http://placehold.it/200x300%22」。我已經更新您的.replace（）找人「，以及和小提琴是http://jsfiddle.net/4uMEq/

$('#test').on('click', function() { 
    $(this).text(getDimensions($(this))); 
}); 

var getDimensions = function (item) { 
    var img = new Image(); 
    img.src = item.css('background-image').replace(/url\(|\)$|"/ig, ''); 
    return img.width + ' ' + img.height; 
};

來源

2013-06-21 22:05:12 SpenserJ

謝謝，我從來沒有已經猜到這是問題了 –

如果有疑問，打開網絡檢查器和'console.log（）';）讓我失望的是FF無法加載具有該奇怪URL的圖像。 – SpenserJ

我猜你需要等待圖像onload事件。

來源

2017-05-05 11:06:00 STO

獲取背景圖像的尺寸

回答

相關問題