clientWidth, offsetWidth, scrollWidth quickly understand

The following began to distinguish

    A, clientWidth and clientHeigh, clientTop and clientLeft
        . 1, the actual width clientWidth

        clientWidth = width+左右padding

 

        2, the actual height of clientHeigh

         clientHeigh = height + 上下padding 

 

        3, the actual width clientTop

           clientTop = boder.top (frame width)

 

        4, the actual width clientLeft

            clientLeft = boder.left (width of the left border)

 

    Two, and offsetWidth offsetHight, offsetTop and the offsetLeft
         . 1, the actual width offsetWidth

            offsetWidth = width + padding + left around boder

 

         2, the actual height of offsetHeith

            offsetHeith = height + boder vertically down padding +

 

         3, offsetTop actual width

            offsetTop: an outer edge of the frame to the nearest positioned parent distance (the offsetParent) the upper edge of the frame for the current element. If the parent level are not positioned, respectively, is the distance from the top of the body and the left.

 

         4, offsetLeft actual width

            offsetLeft: outside the left edge of the frame element nearest positioned to the left side of the box from the edge of the parent (offsetParent) current. If the parent level are not positioned, respectively, is the distance from the top of the body and the left

 

    Three, scrollWidth and scrollHeight, scrollTop and the scrollLeft
        . 1, scrollWidth actual width

            scrollWidth: Get true width specified label content layer (viewing area width + hidden area width).

 

        2, the actual height of scrollHeight

 　　　　scrollHeight: Get the true height of the tag content specified layer (the visible area is hidden area height + height)

 

         3，scrollTop

             scrollTop: distance from the top of the top layer to the visible region of the content.

 

          实例：var scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;

          Continued access to highly ways:

          　　window.addEventListener('scroll', ()=>{

　　　　　　var scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;

　　　　　});

         

　　　4，scrollLeft

              scrollLeft: visible region from the left end to the left end of the content layer.

 

　　Note: The original link: https: //blog.csdn.net/qq_42089654/article/details/80515916