JQuery获取元素文档大小、偏移和位置和滚动条位置的方法集合

 因为浏览器的兼容问题，如果使用javascript获取这些数值是一个相当痛苦的过程。好在JQuery提供了简单优雅，并且兼容的解决方法。

获取浏览器和页面文档的宽度和高度

Js代码   

1. //获取浏览器显示区域的高度    
2. $(window).height();    
3. //获取浏览器显示区域的宽度    
4. $(window).width();    
5.   
6. //获取页面的文档高度    
7. $(document.body).height();    
8. //获取页面的文档宽度    
9. $(document.body).width();   

获取滚动条的位置

Js代码   

1. //获取滚动条到顶部的垂直高度    
2. $(document).scrollTop();    
3. //获取滚动条到左边的垂直宽度    
4. $(document).scrollLeft();   

计算位置和偏移量

 

Js代码   

1. //offset方法是一个很有用的方法，它返回包装集中第一个元素的偏移信息。默认情况下是相对body的偏移信息。结果包含top和left两个属性。    
2. offset(options, results)    
3. options.relativeTo　　//指定相对计算偏移位置的祖先元素。这个元素应该是relative或absolute定位。省略则相对body。    
4. options.scroll　　//是否把滚动条计算在内，默认TRUE    
5. options.padding　　//是否把padding计算在内，默认false    
6. options.margin　　//是否把margin计算在内，默认true    
7. options.border　　//是否把边框计算在内，默认true  

显示在屏幕正中央

 

Js代码  

1. //request data for centering   
2. var windowWidth = document.documentElement.clientWidth;   
3. var windowHeight = document.documentElement.clientHeight;   
4. var popupHeight = $("#popupContact").height();   
5. var popupWidth = $("#popupContact").width();   
6. //centering   
7. $("#popupContact").css({   
8.     "position": "absolute",   
9.     "top": windowHeight/2-popupHeight/2,   
10.     "left": windowWidth/2-popupWidth/2   
11. });