CODE大全
版权声明:本文为博主原创文章,未经博主允许不得转载。

width、offsetWidth、clientWidth、getComputedStyle、currentStyle、naturalWidth的区别

发布时间:『 2016-09-30 21:58』  博客类别:WEB前端  阅读(331) 评论(0)

在论坛里,QQ群里经常会遇到获取宽度,高度的问题。由于时间和经验的关系,我们也没细细研究,给的答案都是比较模糊的。直到最近遇到touchslider.js轮播代码里添加自适应屏幕大小的功能时,才深深的明白大家的困惑?不管用什么样的方法都无法获取到IMG标签的高宽,最后只有给图片定一个高宽的比例值;趁今天有空我就写了几个demo测试了下,找了下原因;且听我细细说来~~~ 

首先获取高宽的方法具我所知有:obj.style.width(height);

obj.offsetWidth(offsetHeight);

obj.clientWidth(clientHeight);

getComputedStyle 与 currentStyle;

obj.naturalWidth(naturalHeight) 

为了叙述简单,这里仅为width为例。 

先说第一个方法:obj.style.width;这个方法,只有在标签里用style属性写进了width的大小,才可以获取到值,否则只返回的为空。看下面的demo:

<img style="width:400px" src="http://img.hb.aicdn.com/codedqxxxxxx">
<script>
var imgW = document.getElementsByTagName('img')[0].style.width;
   alert(imgW);  //返回值为400px,否则返回空;
</script>

以上这个方法只适应用标签的style属性里添加width值,在引入的样式表中添加width值(不管是link引入还是html页面中使用style标签)也一样获取不到值,返回为空。 

然后说一下第二个方法与第三个方法obj.offsetWidth(offsetHeight); obj.clientWidth(clientHeight);一般情况下,如果标签没有设置padding值及border值,那么它们两个获取到的值是一样的。但很多情况下都不是这样的,其实offsetWidth得到的是width值+padding值+border值,clientWidth得到的是width值+padding值,看下面的demo:

<style>
img{ padding:20px;border:1px solid red;}
</style>
<img style="width:400px" src="http://img.hb.aicdn.com/codedqxxxxxx">
<script>
var img = document.getElementsByTagName('img')[0], 
            imgOffsetWidth = img.offsetWidth,  //442px
            imgClientWidth = img.clientWidth;  //440px;
</script>

注意,现在获取到的img标签的宽,是在img标签里添加的style=”width:400px” 。如果去掉这一属性值,那么上面demo里的imgOffsetWidth与imgClientWidth返回的值就是图片本身的高宽值。可以偿试下。

另处,getComputedStyle 与 currentStyle是处理兼容性的两个方法,获取到的值都是图片在屏幕上显示的仅仅图片的高宽值,不会获取到img标签的padding及border值;但其中getComputedStyle适用于Firefox/IE9/Safari/Chrome/Opera浏览器,currentStyle适用于IE6/7/8。但是如果img标签即使没有设置style属性也没有引入样式表,那么只有getComputedStyle能获取到值,即为图片本身高宽值,currentStyle则返回auto。下面有一个demo:

<img style="width: 400px;" src="http://img.hb.aicdn.com/codedqxxxxxx">
<script>
	function getStyle(el, name) {
		if(window.getComputedStyle) {
			return window.getComputedStyle(el, null)[name];
		}else{
			return el.currentStyle[name];
		}
	}
	var div = document.getElementsByTagName('img')[0];
	alert(getStyle(div, 'width'));
</script>

可以把img标签里的style属性去掉再测试下。 

最后就是obj.naturalWidth(naturalHeight)方法,这是HTML5里新添加的一个获取元素高宽的方法,但只适用于Firefox/IE9/Safari/Chrome/Opera浏览器。下面有一个适用于各个浏览器的demo:

<img style="width: 400px;" src="http://img.hb.aicdn.com/codedqxxxxxx">
<script>
	document.addEventListener('DOMContentLoaded',function(){
		function getImgNaturalStyle(img,callback) {
			var nWidth, nHeight
			if (img.naturalWidth) { // 现代浏览器
				nWidth = img.naturalWidth
				nHeight = img.naturalHeight
			} else {  // IE6/7/8
				var imgae = new Image();
				image.src = img.src;
				image.onload = function(){
					callback(image.width, image.height)
				}
			}
			return [nWidth, nHeight]
		}
		var img = document.getElementsByTagName('img')[0],
				imgNatural = getImgNaturalStyle(img);
		alert(imgNatural);
	});
</script>

需要注意是的在IE6/7/8浏览器中image.src只有在img图片完全加载出来以后才获取得到,否则会报错。

提到图片的完全加载,就解决了上次我遇到的这个怎么都获取不到图片高度问题;

document.addEventListener("DOMContentLoaded",function(){
    //原因就是当时我们的代码是在这样的环境下写的,这个时候,
    //只是加载了img的标签,即只有DOM结构,图片还没有完全加载进来,
    //所以获取到的值都是0,但如果在window.onloaded的环境下写,就能得到其所示高宽了
});

也就是说,以上能够获取到图片高宽的方法都要以图片已经完全加载为前提。


——— 全文完 ———
如有版权问题,请联系532009913@qq.com。
关键字:   offsetWidth     clientWidth     currentStyle     getComputedStyle     naturalWidth  
评论信息
暂无评论
发表评论
验证码: 
Powered by CODE大全 | 鄂ICP备14009759号-2 | 网站留言 Copyright © 2014-2016 CODE大全 版权所有