卖坚果的怪叔叔 卖坚果的怪叔叔
  • 首页
  • 生活
  • 技术
  • 记录
  • 工具箱
  • 关于我
首页 › 技术 › JQ获取图片的实际尺寸

JQ获取图片的实际尺寸

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

在实际情况中我们设置了图片大小,比如我们设置了 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的区别和用法
下一篇
在小程序中查看

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

热门文章
移动端常见布局方式
利用yalc本地调试NPM组件库!
我生病😷
不看后悔系列!原来代码还可以这么写!
Git相关操作及术语(转载)
正月十五,『炸麻团』咯~
专题标签
agent (1) CSS (15) dom (1) Es6入门系列 (14) Git (3) html (1) iview (1) JavaScript (9) js (4) Lif (1) Node (4) pyecharts (1) Python (10) ref (1) scriptable (1) Skill (1) vsCode (1) vue (4) wordpress (2) 三月 (1) 上海 (1) 假期 (1) 其他分享 (3) 前端两三问 (15) 古镇 (1) 外滩 (1) 对象 (1) 小程序 (5) 年度总结 (6) 年终总结 (1) 微信机器人 (4) 打字机 (1) 技术 (1) 日常问题 (8) 日常问题记录 (1) 春天 (2) 服务器 (2) 海族馆 (1) 生活 (8) 网上国网 (1) 记录 (3) 通勤 (1) 重学JavaScript (11) 面试题 (10) 🌸 (1)
什么是Agent?
2026-08-15 23:49:12
551 1 2
什么是 Skill?
2026-08-12 21:32:42
490 1 0
失业在家,我给小朋友做了一个练字小程序!
2026-08-07 16:21:52
941 10 1
上线8年,15万用户的小程序,一共赚了多少钱?
2026-05-30 18:01:24
4,877 4 0
  • 0
博主

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

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

开往-友链接力

萌ICP备20230818号

苏ICP备18048410号-3
  • 首页
  • 生活
  • 技术
  • 记录
  • 工具箱
  • 关于我
# CSS # # JavaScript # # vue # # 微信 # # 生活 #
坚果大叔
346
文章
172
评论
432
喜欢