首页 > web前端 > css教程 > 如何使用 jQuery 获取 Div 的背景图像尺寸?

如何使用 jQuery 获取 Div 的背景图像尺寸?

Susan Sarandon
发布: 2024-12-13 20:20:12
原创
781 人浏览过

How to Get a Div's Background Image Dimensions Using jQuery?

使用 jQuery 确定背景图像尺寸

简介

使用 jQuery 检索 div 背景图像的尺寸可能看起来很简单但也带来了挑战。本文解决了这个任务,并提出了一个简化流程的扩展解决方案。

问题:

查询:如何获取背景图像使用 jQuery 调整 div 的大小(宽度和高度)?

响应A:

要检索背景图像尺寸,请采用以下方法:

var image_url = $('#myDiv').css('background-image'),
    image;

// Remove url() or url("")
image_url = image_url.match(/^url\("?(.+?)"?\)$/);

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

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

    image.src = image_url;
}
登录后复制

响应 B(2018 更新):

为了全面解决方案:

var getBackgroundImageSize = function(el) {
    var imageUrl = $(el).css('background-image').match(/^url\(["']?(.+?)["']?\)$/);
    var dfd = new $.Deferred();

    if (imageUrl) {
        var image = new Image();
        image.onload = dfd.resolve;
        image.onerror = dfd.reject;
        image.src = imageUrl[1];
    } else {
        dfd.reject();
    }

    return dfd.then(function() {
        return { width: this.width, height: this.height };
    });
};
登录后复制

用法

getBackgroundImageSize(jQuery('#mydiv'))
    .then(function(size) {
        console.log('Image size is', size.width, size.height);
    })
    .fail(function() {
        console.log('Could not get size because could not load image');
    });
登录后复制

以上是如何使用 jQuery 获取 Div 的背景图像尺寸?的详细内容。更多信息请关注PHP中文网其他相关文章!

来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
作者最新文章
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板