javascript offset/client/scroll/的理解总结

注意:这些内容在不同的浏览器和浏览器版本都会造成不同的情况,这一块先不进行总结.

一.offset

　解释:

   当前标签有定位,则offset 是距离 最近有定位的父级(如找不到,则是body)的距离

   .1.offsetTop

　 2.offsetLeft

   第一种:当前标签有滚动条: offsetWidth =  clientWidth + 滚动条 + 边框

             通俗的讲: offsetWidth  =  开始设置的宽度     上面的解释分析     offsetWidth = 内容 +clientWidth + 滚动宽度(17px) +boder

            通俗的讲: offsetHeight =  开始设置的高度    上面的解释分析     offsetHeight =内容 +clientWidth + 滚动宽度(17px) +boder

  第二种:没有滚动条

             通俗的讲: offsetWidth  =  开始设置的宽度     上面的解释分析     offsetWidth = 内容 +clientWidth  +boder

            通俗的讲: offsetHeight =  开始设置的高度    上面的解释分析     offsetHeight =内容 +clientWidth +boder

    3.offsetWidth:元素自身的宽度(内容+padding+border)

    4.offsetHeight: 元素自身的高度

    5.offsetParent:可以查找它对应的父级

    扩展知识点: 

     1/在页面忘记设置了*{ margin:0;padding:0 } 等内容,知道了我们在盒子模型中,有的标签body,ul等标签在网页中是内置了margin的,我的理解是:标签通过浏览器内置的margin是属于标签自己的,所以为啥出现offset的取值为何不那么对应的情况.

     

二.client

    client 内容可视区 

　 案例:设置div 宽100px ,高100px  padding: 10px  border:20px 不使用box-sizing;

     1.clientTop: 根据下面的例子: clientTop:10  

     2.clientLeft: 根据下面的例子: clientTop:10 

   第一种:没有滚动条:

               clientWidth  = 内容 + padding    clientWidth:120px

               clientHeight = 内容+ padding     clientHeight:120px

   第二种:有滚动条 : 

             clientWidth  =  内容 + padding   注意:滚动条 滚动条宽 17   clientWidth:103px;

             clientHeight = 内容 + padding   clientHeight:120px

     3.clientHeight::可视区的高度

     4.clientWidth:可视区的宽度

三.scroll

    scrollHeight:返回元素的整体高度

    scrollWidth:返回元素的整体宽度

     scrollTop: 返回元素上边缘与视图之间的距离

     scrollLeft: 返回元素左边缘与视图之间的距离