文章目录
  1. 1. 现代浏览器中获取实际宽度和高度
  2. 2. 在IE7,8中获取实际宽度和高度
  3. 3. jQuery naturalWidth() and naturalHeight()

本文转自:https://www.w3ctech.com/topic/112

现代浏览器中获取实际宽度和高度

现代浏览器(包括IE9)为IMG元素提供了naturalWidthnaturalHeight属性来获取实际宽度与高度 ,代码如下:

1
2
3
var 
nWidth = document.getElementById('example').naturalWidth,
nHeight = document.getElementById('example').naturalHeight;

在IE7,8中获取实际宽度和高度

在IE8及以前浏览器中并不支持naturalWidthnaturalHeight属性。为IE7,8采用new Image()的方式来获取widthheight

1
2
3
4
5
6
7
8
9
10
function getNatural (DOMelement) {
var img = new Image();
img.src = DOMelement.src;
return {width: img.width, height: img.height};
}

var
natural = getNatural(document.getElementById('example')),
nWidth = natural.width,
nHeight = natural.height;

jQuery naturalWidth() and naturalHeight()

为jQuery添加了两个方法:naturalWidth()naturalHeight()

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
(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));

// 如何使用:
var
nWidth = $('img#example').naturalWidth(),
nHeight = $('img#example').naturalHeight();
文章目录
  1. 1. 现代浏览器中获取实际宽度和高度
  2. 2. 在IE7,8中获取实际宽度和高度
  3. 3. jQuery naturalWidth() and naturalHeight()