Finishing today about clientHeight/clientWidth clientTop/clientLeft, offsetHeight/offsetWidth, offsetTop/offsetLeft, scrollHeight/scrollWi DTH,scrollTop/scrollLeft

The outer div looks like this:

The content div is as follows:

  1. ClientHeight /clientWidth: Width or height of the container plus padding

    The calculation formula is CSS Height/Width + CSS padding

    • clientHeight: height(100px) + padding(30px * 2) = 160px
    • clientWidth: width(100px) + padding(30px * 2) = 160px

  2. ClientTop /clientLeft: The border length is calculated as CSS border width

    • clientTop: borderTop(2px)
    • clientLeft: borderLeft(2px)

The console prints the following:

  1. OffsetHeight /offsetWidth: The element’s border, inner margin, and horizontal scroll bar

    The calculation formula is CSS Height/Width + CSS padding + CSS Scroll Width + CSS border

    • offsetHeight: height(100px) + padding(30px * 2) + border(2px * 2) = 164px
    • offsetWidth: width(100px) + padding(30px * 2) + border(2px * 2) = 164px

  2. OffsetTop /offsetLeft: distance from its offsetParent element where offsetParent element is body and margin is 20px

    • offsetTop: marginTop(20px)
    • offsetLeft: marginLeft(20px)

Htmlelement. offsetParent is a read-only property that returns a reference to the nearest location element that contains the element. If there is no positioned element, offsetParent is the nearest table, table cell, or root element (HTML in standard mode; Body in quirks mode). When element style.display is set to “None”, offsetParent returns NULL.

The console prints the following:

  1. ScrollHeight /scrollWidth: same as clientHeight/clientTop

    The calculation formula is CSS Height/Width + CSS padding

    • scrollHeight: height(100px) + padding(30px * 2) = 160px
    • scrollWidth: width(100px) + padding(30px * 2) = 160px

  2. scrollTop/scrollLeft: The scroll bar scrolling distance is calculated as follows: Width and height of the content (height/width + padding + margin + border) – Height and width of the external container = scrollTop/scrollLeft when the scroll reaches the bottom

    • scrollTop: 200px – 100px = 100px
    • scrollLeft: 200px – 100px = 100px

The console prints the following:

The specific code is as follows:

<! DOCTYPEhtml>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
    <title>Document</title>
    <style>
        .box {
            width: 100px;
            height: 100px; 
            padding: 30px;
            border: 2px solid red;
            margin: 20px;
            overflow: scroll;
        }
        .inner {
            height: 200px;
            width: 200px;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="inner">Here is the content</div>
    </div>
</body>
</html>
Copy the code

&Todo

  1. Event handling of clientX/clientY, layerX/layerY, screenX/screenY, offsetX/offsetY finishing.