js和jQuery获取窗口和元素尺寸简单介绍

当然jQuery是由js实现的，但是毕竟从外观上和使用上有所不同。

下面就分别介绍一下如何使用原生js和jQuery获取窗口和元素的尺寸。

一.原生js获取浏览器客户区的尺寸:

document.documentElement.clientWidth //获取浏览器客户区的宽度 
document.documentElement.clientHeight //获取浏览器客户区的高度

二.原生js获取body的尺寸:

document.body.clientWidth//body对象宽度 
document.body.clientHeight//body对象高度

关于clientWidth属性可以参阅clientWidth属性用法详解一章节。

三.jQuery获取浏览器客户区的尺寸:

$(window).width()//浏览器可见区域宽度
$(window).height()//浏览器可见区域高度

四.jQuery获取页面文档或者body的高度:

$(document).height()//页面文档的高度
$(document.body).height()//body对象高度

五.原生js获取元素的尺寸:

obj.width=obj.style.width//通过style定义的元素width属性值
obj.clientWidth//width + padding的尺寸
obj.offsetHeight//height + padding + border的尺寸

六.jQuery获取元素的尺寸:

obj.innerWidth()//获得包括内边界（padding）的元素宽度。
obj.outerWidth()//获得包括内边界(padding)和边框(border)的元素宽度。
obj.outerWidth(true)//获得包括外边界(margin)的元素宽度。