offsetleft scrolltop 详细图解

[c-sharp] view plaincopyprint?

top,left表示距离 width height 表示宽度和高度

1. 一，举几个说明一下  
2. 1，scrollHeight: 获取对象的滚动高度，对象的实际高度；  
3. 2，scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离 ,向左滚动了多少距离
4. 3，scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离  ，向上滚动了多少距离
5. 4，scrollWidth:获取对象的滚动宽度  ，对象的实际宽度；  
6. 5，offsetHeight:获取对象相对由父坐标 offsetParent 属性指定的父坐标的高度  
7. 6，offsetLeft:获取当前对象到其上级层（指定position：relative属性）左边的距离.  
8. 7，offsetTop:获取当前对象到其上级层（指定position：relative属性）顶部的距离.  
9. 8，event.clientX 相对文档的水平座标  
10. 9，event.clientY 相对文档的垂直座标  
11. 10，event.offsetX 相对容器的水平坐标  
12. 11，event.offsetY 相对容器的垂直坐标  
13. 12，document.documentElement.scrollTop 垂直方向滚动的值  
14. 13，event.clientX+document.documentElement.scrollTop 相对文档的水平座标+垂直方向滚动的量  

15. clientHeight
    大家对 clientHeight 都没有什么异议，都认为是内容可视区域的高度，也就是说页面浏览器中可以看
    到内容的这个区域的高度。

    offsetHeight
    IE、Opera 认为 offsetHeight = clientHeight + 滚动条 + 边框。
    NS、FF 认为 offsetHeight 是网页内容实际高度，可以小于 clientHeight。

    scrollHeight
    IE、Opera 认为 scrollHeight 是网页内容实际高度，可以小于 clientHeight。
    NS、FF 认为 scrollHeight 是网页内容高度，不过最小值是 clientHeight。

    简单地说
    clientHeight 就是透过浏览器看内容的这个区域高度。
    NS、FF 认为 offsetHeight 和 scrollHeight 都是网页内容高度，只不过当网页内容高度小于等于
     clientHeight 时，scrollHeight 的值是 clientHeight，而 offsetHeight 可以小于 clientHeight。
    IE、Opera 认为 offsetHeight 是可视区域 clientHeight 滚动条加边框。
    scrollHeight 则是网页内容实际高度。

    同理
    clientWidth、offsetWidth 和 scrollWidth 的解释与上面相同，只是把高度换成宽度即可

    
    

 

 

 

 

 

[c-sharp] view plain copy print ?

1. 二，js的function  
2. //取得相对于左边的绝对距离，传的参数e是一个对像，比如是document.getElementById(“fuck”)  
3. 查看复制打印?  
4. function   getAbsLeft(e){    
5. var   l=e.offsetLeft;    
6. while(e=e.offsetParent)     l   +=   e.offsetLeft;    
7. return   l;    
8. }    
9. //取得相对于顶部的绝对距离    
10.     
11. function   getAbsTop(e){    
12. var   t=e.offsetTop;    
13. while(e=e.offsetParent)     t   +=   e.offsetTop;    
14. return   t;    
15. }   
    

div.scrollTop表示的是该div向上滚动了多少距离，div.scrollTop的值就是多少，如果该div设置了overflow：hidden，该值也是存在的，如果div.scrollTop设置为0，表示div的值回复到初始位置

div.scrollHeight：表示的是div的整体高度，包括影藏部分的区域，border高度，滚动条高度，如果没有就不加了

div.offsetHeight:表示边框高度+滚动条高度+可见内容区域的高度div.clientHeight

div.clientHeight表示div可见区域的高度 不包括滚动条高度和div的border宽度

div.offsetLeft：表示该div和body的左边距   准确的说是相对于父元素移动了多少距离 ，和position:absolute比较类似，但是absolut比较依赖于postion：relative属性，所有还是有区别的

以上获取的值，基本都不带px单位，只有style.width才带有px像素单位值