有关元素元素位置的属性

在web开发中，对页面元素的定位和控制对初学者来说一直是一个难点。下面是一些有关关于元素位置属性的理解。

offsetTop: 

        Retrieves the calculated top position of the object relative to the layout or coordinate parent, as specified by the offsetParent property

        返回对象元素边界的左上角顶点相对于上层HTML元素边界的左上角顶点的垂直位置。

offsetLeft:

        Retrieves the calculated left position of the object relative to the layout or coordinate parent, as specified by the offsetParent property

        返回对象元素边界的左上角顶点相对于上层HTML元素边界的左上角顶点的水平位置。

 

 

offsetWidth:

        Retrieves the width of the object relative to the layout or coordinate parent, as specified by the offsetParent property.

        返回对象自身的宽度

 

offsetHeight:

        Retrieves the height of the object relative to the layout or coordinate parent, as specified by the offsetParent property.

        返回对象自身的高度

 

ClientTop:

        Retrieves the distance between the offsetTop property and the true top of the client area

       

ClientLeft:

        Retrieves the distance between the offsetLeft property and the true left side of the client area.

       

        clientTop.clientLeft分别返回对象客户端的左上角顶点相对于自身边界的左上角顶点的垂直位置和水平位置。

        可以这样理解：HTML元素是一个容器区域，而这个在HTML元素中嵌入的内容将显示在容器区域的客户区域中。这有点类似房子的建筑面积（HTML元素的边界区域）和实际使用面积(HTML元素的客户端区域) 。

 

clientWidth:

        Retrieves the width of the object including padding, but not including margin, border, or scroll bar.

clientHeight:

        Retrieves the height of the object including padding, but not including margin, border, or scroll bar.

 

                clientWidth, clientHeight 返回对象上的可见客户端区的宽度和高度，不包括滚动条和边框部分。

 

 

scrollTop:

           Sets or retrieves the distance between the top of the object and the topmost portion of the content currently visible in the window.

        用于设置和返回元素上边界与当前被显示内容的上边界之间的距离。对于body对象而言，就是滚动条向下滑动的位置。

scrollLeft:

        Sets or retrieves the distance between the left edge of the object and the leftmost portion of the content currently visible in the window.

        用于设置和返回元素左边界与当前被显示内容的左边界之间的距离。对于body对象而言，就是滚动条向右滑动的位置。

 

 

scrollWidth:

           Retrieves the scrolling width of the object.

scrollHeight:

        Retrieves the scrolling height of the object.

       

        scrollWidth，scrollHeight，返回元素中的完整内容的宽度和高度（包括没有被显示出来的部分）。（注意：不是字面的滚动的宽度和高度）

转载于:https://www.cnblogs.com/wangluochong/archive/2012/04/11/2442441.html