js、jq获取对象位置 对象宽高

1、滚动距离、宽高

scrollTop/scrollLeft/ 对象滚动条的上面/左边折卷的距离 

js写法: document.body.scrollTop || document.documentElement.scrollTop  
jq写法：$(window).scrollTop(); 
--------------------------------------------------------
scrollWidth/scrollHeight 滚动元素对象的实际内容的宽，不包边框的宽度，会随对象中内容的多少改变（内容多了可能会改变对象的实际宽度）
js写法: document.body.scrollWidth || document.documentElement.scrollWidth  
jq无此相关写法但是获取同等的高度 可以用:$(obj).innerHeight() 获取对象的内容高度   包括补白 但不包括边框

2、相对位置、距离

offsetLeft、offsetTop 
对象离最近有定位属性的父级的左边距，如果都没有定位属性那默认为window

js写法: obj.offsetLeft、 
jq写法：$(obj).offset().left; 

jq扩展：获取匹配元素相对父元素的偏移 （会包含自身的补白和边框） position().top / postion().left方法
jq写法：$(obj).position().left;
------------------------------------------------------------------
offsetHeight 、offsetWidth
对象本身的高度（宽度）
js写法:obj.offsetHeight  获取到obj的高度 包括补白（margin、padding） 包括边框的高度
jq写法:$(obj).outerHeight() 获取对象的内容高度   包括补白 也包括边框

扩展补充：
jq写法:$(obj).height() 获取对象的内容高度   不包括补白和边框
jq写法:$(obj).innerHeight() 获取对象的内容高度   包括补白 但不包括边框

3、可视距离、宽高

clientLeft，clientTop 
这两个返回的是元素周围边框的厚度,如果不指定一个边框,他的值就是
js写法:obj.clientLeft
jq无此相关写法 ，不过jq计算边框可以 用$(obj).outerHeight()-$(obj).innerHeight()计算得出
--------------------------------------------------------------------
clientHeight/clientWidth      
文档的document的可视区域的高度(宽度),包括补白 不包括边框
js写法：obj.clientHeight

jq无此属性的写法  不过要获取对象的高度不包括变宽 可用$(obj).innerHeight()

获取浏览器的可视宽度 
兼容写法：document.documentElement.clientHeight;
高级浏览器：window.document.documentElement.getBoundingClientRect().width 

4、坐标位置

相对文档

IE：event.clientX 、event.clientY //   

FF: event.pageX 、event.pageY       相对文档的水平座标（垂直座标）

相对容器

ie：event.offsetX，event.offsetY

FF：event.layerX和event.layerY   相对容器的水平坐标（垂直坐标 ）

获取浏览器在电脑屏幕中的位置

兼容性写法：    x = window.screenLeft || screenX;  y=window.screenTop || screenY;

获取鼠标在浏览器中的坐标   

$(obj).mousemove(function(e){
    var x=e.pageX;  这就是鼠标的x坐标  e.clientX貌似也可以
    var y=e.pageY;  这就是鼠标的y坐标

})

兼容写法：

[html]  view plain  copy

1. function mousePos(e){   
2.     var x,y;   
3.     var e = e||window.event;   
4.     return {   
5.         x:e.clientX+document.body.scrollLeft+document.documentElement.scrollLeft,   
6.         y:e.clientY+document.body.scrollTop+document.documentElement.scrollTop   
7.     };   
8. }  
9.   
10. $('#box').mousemove(function(){  
11.     document.title=mousePos().x +"||" + mousePos().y;  
12. })  

获取鼠标在容器中的坐标  
  document.getElementById('box').οnclick=function(e){
    var x=e.offsetX || layerX;  这就是鼠标的x坐标
    var y=e.offsetY || layerY;  这就是鼠标的y坐标

  }

文章出处：http://blog.csdn.net/kongjiea/article/details/22505437