clientHeight、offsetHeight 区别 笔记

一张图 说明全部

clientHeight

和

clientWidth

用于描述元素内尺寸，是指元素内容+内边距大小，不包括边框（低版本IE下实际包括）、外边距、滚动条部分

offsetHeight

和

offsetWidth

用于描述元素外尺寸，是指元素内容+内边距+边框，不包括外边距和滚动条部分

clientTop

和

clientLeft

返回内边距的边缘和边框的外边缘之间的水平和垂直距离，也就是左，上边框宽度

offsetTop

和

offsetLeft

表示该元素的左上角（边框外边缘）与已定位的父容器（offsetParent对象）左上角的距离

获取视口的大小

（视口是显示文档内容的浏览器的一部分，它不包括浏览器外壳（菜单，工具栏，状态栏等），也就是当前窗口显示页面部分，不包括滚动条。）

（我们经常用到的document就是整个页面部分，而不仅仅是窗口可见部分，还包括因为窗口大小限制而出现滚动条的部分，它的左上角就是我们所谓相对于文档坐标的原点。）

方法一、getViewport函数就可以返回浏览器窗口的高和宽。

function getViewport(){
　　　　if (document.compatMode == "BackCompat"){  // document.compatMode用来判断当前浏览器采用的渲染方式。BackCompat：标准兼容模式关闭。CSS1Compat：标准兼容模式开启。
　　　　　　return {
　　　　　　　　width: document.body.clientWidth,
　　　　　　　　height: document.body.clientHeight
　　　　　　}
　　　　} else {
　　　　　　return {
　　　　　　　　width: document.documentElement.clientWidth,
　　　　　　　　height: document.documentElement.clientHeight
　　　　　　}
　　　　}
　　}

例如



方法二、

function getViewPortSize(w) {
var w = w || window;
if (w.innerWidth != null)
return { w: w.innerWidth, h: w.innerHeight };
var d = w.document;
if (document.compatMode == "CSS1Compat")
return { w: d.documentElement.clientWidth, h: d.documentElement.clientHeight };
return { w: d.body.clientWidth, h: d.body.clientHeight };
}

clientHeight与height的区别是如果有滚动条时应减去滚动条的17px不可用部分,

offsetHeight与Height的区别是增加了boder的高度,

ScrollHeihgt与Height的区别是火狐下与offsetHeight一致.

参考信息

http://www.ruanyifeng.com/blog/2009/09/find_element_s_position_using_javascript.html

http://www.cnblogs.com/yuteng/articles/1894578.html