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

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

Barbara Streisand
发布: 2024-12-07 00:26:15
原创
871 人浏览过

How Can I Get the Dimensions of a DIV's Background Image Using jQuery?

使用 jQuery 获取 DIV 背景图像的尺寸

在 jQuery 中寻求确定 DIV 背景图像的尺寸可以是挑战,尤其是当内置方法似乎达不到要求时。幸运的是,有一个解决方案可以利用 Image 对象的力量来克服这个障碍。

最初,人们认为简单的行“jQuery('#myDiv').css('background-image') 。高度();”足以检索背景图像的高度。然而,这种方法遇到了错误,表明结果不是函数。

成功的关键在于认识到背景图像存储为 URL 而不是实际图像。要访问维度,我们需要首先提取 URL。这可以使用以下代码来完成:

var image_url = jQuery('#myDiv').css('background-image').match(/^url\("?(.+?)"?\)$/);
登录后复制

获取 URL 后,我们创建一个 Image 对象并加载图像。加载后,对象将公开所需的尺寸:

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

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

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

此方法可确保加载实际图像并准确获取尺寸。此外,它支持各种形式的 URL 指定,包括带引号或括号的 URL 指定。

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

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