我如何获得jQuery的背景图像大小？

问题很简单。 我如何在jQuery中获得div的背景图像大小（宽度和高度）。 这甚至有可能吗？ 我认为这将工作：

jQuery('#myDiv').css('background-image').height(); 

我得到的错误消息是这不是一个函数。

Answer 1

你将不得不做这样的事情：

 var url = $('#myDiv').css('background-image').replace('url(', '').replace(')', '').replace("'", '').replace('"', ''); var bgImg = $('<img />'); bgImg.hide(); bgImg.bind('load', function() { var height = $(this).height(); alert(height); }); $('#myDiv').append(bgImg); bgImg.attr('src', url); 

由于代码的简单性，您不能在背景图片的url中使用圆括号或引号。 但是，代码可以扩展以获得更大的支持。 我只是想传达一般的想法。

Answer 2

还有一个版本。 不需要DOM操作，支持图像文件名中的所有字符。

 var image_url = $('#something').css('background-image'), image; // Remove url() or in case of Chrome url("") image_url = image_url.match(/^url\("?(.+?)"?\)$/); if (image_url[1]) { image_url = image_url[1]; image = new Image(); // just in case it is not already loaded $(image).load(function () { alert(image.width + 'x' + image.height); }); image.src = image_url; } 

Answer 3

迟到的答案，但你也可以这样做：

 var img = new Image; img.src = $('#myDiv').css('background-image').replace(/url\(|\)$/ig, ""); var bgImgWidth = img.width; var bgImgHeight = img.height; 

那么你不必操纵dom对象;

Answer 4

我把John的答案和Stryder的Plugin Style合并在一起。 这个插件等待图像加载：

 $.fn.getBgImage = function(callback) { var height = 0; var path = $(this).css('background-image').replace('url', '').replace('(', '').replace(')', '').replace('"', '').replace('"', ''); var tempImg = $('<img />'); tempImg.hide(); //hide image tempImg.bind('load', callback); $('body').append(tempImg); // add to DOM before </body> tempImg.attr('src', path); $('#tempImg').remove(); //remove from DOM }; // usage $("#background").getBgImage(function() { console.log($(this).height()); }); 

请随意扩展此代码： https ： //gist.github.com/1276118

Answer 5

另一个简短的方法

 function bgSize($el, cb){ $('<img />') .load(function(){ cb(this.width, this.height); }) .attr('src', $el.css('background-image').match(/^url\("?(.+?)"?\)$/)[1]); } 

用法

 bgSize($('#element-with-background'), function(width, height){ console.log('width : ' + width + ' height : ' + height); }); 

https://jsfiddle.net/x4u2ndha/58/

Answer 6

我做了同样的事情的宽度:)

 $.fn.getBgWidth = function () { var width = 0; var path = $(this).css('background-image').replace('url', '').replace('(', '').replace(')', '').replace('"', '').replace('"', ''); var tempImg = '<img id="tempImg" src="' + path + '"/>'; $('body').append(tempImg); // add to DOM before </body> $('#tempImg').hide(); //hide image width = $('#tempImg').width(); //get width $('#tempImg').remove(); //remove from DOM return width; }; 

Answer 7

它有一段时间，但我也需要这个解决scheme，基于一些build议的解决scheme，这里是我的完整解决scheme。

 $.fn.getBgHeight = function () { var height = 0; var path = $(this).css('background-image').replace('url', '').replace('(', '').replace(')', '').replace('"', '').replace('"', ''); var tempImg = '<img id="tempImg" src="' + path + '"/>'; $('body').append(tempImg); // add to DOM before </body> $('#tempImg').hide(); //hide image height = $('#tempImg').height(); //get height $('#tempImg').remove(); //remove from DOM return height; }; 

Answer 8

css（'background-image'）会返回“url（…..）”，你不能用这个testing图片的高度，因为它不是一个DOM对象。

Answer 9

与上面相同，但使用regexp而不是replace（）

 $.fn.extend({ /** * gets background image * @param callback function (inside - this = HTMLElement image) */ get_bg_image: function(callback) { if (typeof callback != 'function') return; var regexp = /url\((.+)\)/i, regexp2 = /["']/gi, res = regexp.exec($(this).css('background-image')), img_src = res[1].replace(regexp2, ''), $tempImg = $('<img />'); $tempImg.hide(); $tempImg.bind('load', function(e) { callback.call(this, e); $tempImg.remove(); }); $('body').append($tempImg); $tempImg.attr('src', img_src); } }); // usage $('div').get_bg_image(function() { var bg_img_width = $(this).width(); }); 

Answer 10

以下是我的改编：

 $.fn.getBgDim = function (callback) { var width = 0, height = 0, path = $(this).css("background-image").replace("url(", "").replace(")", "").replace("\"", "").replace("\"", ""), tmp = $("<img />"); tmp.hide(); tmp.bind("load", function() { width = $(this).width(); height = $(this).height(); callback({"width": width, "height": height}); $(this).remove(); }); $("body").append(tmp); tmp.attr('src', path); }; 

用法：

 $("#image").getBgDim(function(dim) { console.log("Height: " + dim.height + " Width: " + dim.width); }); 

Answer 11

也许几乎没有什么可能性，我试图尽可能简化，最终这对我有用

 var img = new Image ; img.src = $('#dom').css('background-image').replace("url(", "").replace(")", "").replace("\"", "").replace("\"", ""); $(img).load(function() { var bgImgWidth = img.width; var bgImgHeight = img.height; console.log("w::"+bgImgWidth+",h::"+bgImgHeight) ; }) ; 

Answer 12

以上解决scheme的组合版本

 var width, height; $(image).load(function () { width = image.width; height = image.height; }); image.src = $('#id').css('background-image').replace(/url\(|\)$/ig, ""); 

Answer 13

在这种情况下，你的CSS有双引号或浏览器操作执行以下操作。

 var url = $('#myDiv').css('background-image').replace('url(','').replace(')','').replace('"','').replace('"',''); var bgImg = $('<img />'); bgImg.hide(); bgImg.bind('load', function() { var height = $(this).height(); alert(height); }); $('#myDiv').append(bgImg); bgImg.attr('src', url); 

Answer 14

这是我的翻译。

 $.fn.getBgImage = function (callback) { var path = $(this).css('background-image').match(/^url\("?(.+?)"?\)$/)[1]; var tempImg = $('<img />').hide().bind('load', function () { callback($(this).width(), $(this).height()); $(this).remove(); }).appendTo('body').attr('src', path); }; 

用法：

 imgDiv.getBgImage(function (imgW, imgH) { //use the imgW and imgH here! });