卖坚果的怪叔叔 卖坚果的怪叔叔
  • 首页
  • 技术
  • 生活
  • 记录
  • 朋友
  • 常用代码
  • 关于
首页 › 技术 › JQ获取图片的实际尺寸

JQ获取图片的实际尺寸

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

在实际情况中我们设置了图片大小,比如我们设置了 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的区别和用法
下一篇
今日天气
摸鱼日历
摸鱼人日历
近期文章
  • 二维数组数据动态组合
  • Vite自动全局注册组件!
  • element-ui 控制台 『 Prop being mutated: "placement" 』的报错~
  • 猫🐱
  • Input 空格问题
归档
  • 2022年7月
  • 2022年6月
  • 2022年5月
  • 2022年4月
  • 2022年3月
  • 2022年2月
  • 2022年1月
  • 2021年12月
  • 2021年11月
  • 2021年10月
  • 2021年9月
  • 2021年8月
  • 2021年7月
  • 2021年5月
  • 2021年4月
  • 2021年2月
  • 2021年1月
  • 2020年12月
  • 2020年11月
  • 2020年10月
  • 2020年9月
  • 2020年8月
  • 2020年7月
  • 2020年6月
  • 2020年5月
  • 2020年4月
  • 2020年3月
  • 2020年2月
  • 2020年1月
  • 2019年12月
  • 2019年11月
  • 2019年10月
  • 2019年9月
  • 2019年8月
  • 2019年7月
  • 2019年6月
  • 2019年5月
  • 2019年4月
  • 2019年3月
  • 2019年2月
  • 2019年1月
  • 2018年12月
  • 2018年11月
  • 2018年10月
  • 2018年9月
  • 2018年8月
  • 2018年7月
  • 2018年6月
  • 2018年5月
  • 2018年3月
  • 2018年2月
  • 2017年12月
  • 2017年11月
  • 2017年9月
二维数组数据动态组合
2022-07-28 10:50:47
144 0 0
Vite自动全局注册组件!
2022-07-07 14:05:48
226 1 2
element-ui 控制台 『 Prop being mutated: "placement" 』的报错~
2022-06-28 19:41:29
1,680 0 0
Input 空格问题
2022-06-22 10:52:44
243 0 1
  • 0
博主

一枚佛系前端开发,会一丢丢摄影,喜欢折腾,爱好美食。分享点前端技巧、笔记以及各种有趣的APP和资源教程♥♥

友链
Lieme
公众号
西豆 崔欣 执行上下文 卖坚果的怪叔叔 集赞助手
Copyright © 2017-2022 卖坚果的怪叔叔. Designed by nicetheme.

苏ICP备18048410号-2
  • 首页
  • 技术
  • 生活
  • 记录
  • 朋友
  • 常用代码
  • 关于
坚果大叔
201
文章
48
评论
121
喜欢