卖坚果的怪叔叔 卖坚果的怪叔叔
  • 首页
  • 闲言碎语
  • 技术
  • 生活
  • 记录
  • 朋友
  • 热点新闻
  • 常用代码
  • 工具箱
  • 关于
首页 › 技术 › JQ获取图片的实际尺寸

JQ获取图片的实际尺寸

坚果大叔
2018-11-30 18:10:14技术阅读 2,557

在实际情况中我们设置了图片大小,比如我们设置了 400 300 但实际的图片大小是 1300 1000 那我们怎么获取这个实际的大小呢。

   在原生js 中可以通过  
   nWidth = document.getElementById('example').naturalWidth,
   nHeight = document.getElementById('example').naturalHeight;

在JQ 中可以通过封装natural来实现

 (function($){
    var props = ['Width', 'Height'],
        prop;
    while (prop = props.pop()) {
        (function (natural, prop) {
            $.fn[natural] = (natural in new Image()) ? 
            function () {
                return this[0][natural];
            } : 
            function () {
                var node = this[0],
                    img,
                    value;
                if (node.tagName.toLowerCase() === 'img') {
                    img = new Image();
                    img.src = node.src,
                    value = img[prop];
                }
                return value;
            };
        }('natural' + prop, prop.toLowerCase()));
    }
}(jQuery));

使用方法:

$("#a").naturalWidth();
$("#a").naturalHeight();
Jquery
赞赏 赞(0)
本文系作者 @坚果大叔 原创发布在 卖坚果的怪叔叔。未经许可,禁止转载。
CSS Content 属性 新发现
上一篇
map,filter,forEach的区别和用法
下一篇
在小程序中查看

这是个😊,挣点服务器费用😜

搜你想看的
聚合文章
早上小毛驴40km通勤上班~
map,filter,forEach的区别和用法
5000字!带你零距离接触websocket!
Mac 如何安装mongoDB
闲言碎语
Memos
使用uview-plus遇到的一些问题!
2025-09-19 20:21:59
1,039 0 1
Nuxt3中的水合是什么?以及使用中的一些总结!
2025-08-30 19:42:35
1,366 0 0
Element Plus Upload 添加支持拖拽排序~
2025-07-30 20:55:55
1,047 1 0
Nuxt3中piana持久化处理!
2025-06-22 18:45:45
1,091 0 3
  • 0
博主

一位佛系的前端开发者,略通摄影,乐于尝试新事物,热衷于美食。

友链
故事胶片
公众号
坚果大叔 执行上下文 卖坚果的怪叔叔 Dacking
Copyright © 2017-2025 卖坚果的怪叔叔

开往-友链接力

萌ICP备20230818号

苏ICP备18048410号-3
  • 首页
  • 闲言碎语
  • 技术
  • 生活
  • 记录
  • 朋友
  • 热点新闻
  • 常用代码
  • 工具箱
  • 关于
# CSS # # JavaScript # # vue # # 微信 # # 生活 #
坚果大叔
328
文章
138
评论
401
喜欢