页面元素宽高及位置获取方法

在青春中探索，在岁月中沉淀、在失去中珍惜。

一、获取页面可视宽高

获取可视高

window.innerHeight || document.documentElement.clientHeight
//  window.innerHeight（除IE均支持，如果底部出现滚动条，则包括滚动条的宽）
//  document.documentElement.clientHeight（兼容IE，包括滚动条的宽）

获取可视宽

window.innerWidth || document.documentElement.clientWidth
window.innerWidth（包括滚动条的宽）
document.documentElement.clientWidth（不包括滚动条的宽）

二、获取页面内容宽高

获取内容高

document.body.scrollHeight || document.body.offsetHeight

获取内容宽（略）

三、获取屏幕宽高

获取屏幕宽

window.screen.width

获取屏幕高

window.screen.height

四、获取element宽高和位置

1、获取element位置

element.offsetLeft   //元素相对于窗口的left
element.offsetTop   //元素相对于窗口的top

offset.png

2、获取element宽高

clientWidth = width + padding
clientHeight = height + padding
offsetWidth = width + padding + border
offsetHeight = width + padding + border

client.. 比 offset.. 多出了border的宽度

五、根据视口获取相对位置

element.getBoundingClientRect()

image.png

clientRect.png

六、滚动条滚动的距离

获取距离顶部的滚动距离

document.documentElement.scrollTop || document.body.scrollTop

document.documentElement.scrollTop(谷歌、火狐均支持)
document.body.scrollTop(兼容ie)

获取距离左边的滚动距离

document.documentElement.scrollLeft || document.body.scrollLeft

七、jquery中的方法

获取浏览器显示区域（可视区域）的高度 ：   
$(window).height();   
获取浏览器显示区域（可视区域）的宽度 ：
$(window).width();   
获取页面的文档高度   
$(document).height();   
获取页面的文档宽度 ：
$(document).width(); 
浏览器当前窗口文档body的高度：  
$(document.body).height();
浏览器当前窗口文档body的宽度： 
$(document.body).width();
获取滚动条到顶部的垂直高度 (即网页被卷上去的高度)  
$(document).scrollTop();   
获取滚动条到左边的垂直宽度 ：
$(document).scrollLeft(); 
获取或设置元素的宽度：
$(element).width();
获取或设置元素的高度：
$(element).height();
某个元素的上边界到body最顶部的距离：element.offset().top;（在元素的包含元素不含滚动条的情况下）
某个元素的左边界到body最左边的距离：element.offset().left;（在元素的包含元素不含滚动条的情况下）
返回当前元素的上边界到它的包含元素的上边界的偏移量：element.offset().top（在元素的包含元素含滚动条的情况下）
返回当前元素的左边界到它的包含元素的左边界的偏移量：element.offset().left（在元素的包含元素含滚动条的情况下）