JavaScript offset offset, visual area client, scroll scroll series

JavaScript offset offset, visual area client, scroll scroll series

1.
element.offsetTop element.offsetLeft The
above two methods get the upper distance and the left distance of the element from its parent element, but the parent element has to set the positioning, if the positioning is not set, the body is the main

<style>
        * {
            margin: 0;
            padding: 0;
        }
        
        .box1 {
            position: relative;
            width: 200px;
            height: 200px;
            margin: 100px;
            background-color: blanchedalmond;
        }
        
        .son {
            width: 100px;
            height: 100px;
            margin-left: 100px;
            background-color: black;
        }
        
        .box2 {
            width: 200px;
            height: 200px;
            background-color: blue;
            margin-top: 500px;
            margin-left: 300px;
            border: 20px solid red;
            padding: 20px 20px;
        }
</style>
<div class="box1">
        <div class="son"></div>
</div>
<div class="box2"></div>
<script>
		var box1 = document.querySelector('.box1');
        console.log(box1.offsetTop);  //100
        console.log(box1.offsetLeft);  //100
        var son = document.querySelector('.son');
        console.log(son.offsetTop);  //0
        console.log(son.offsetLeft);  //100
</script>

element.offsetWidth element.offsetHeight The
above two methods get the width and height of the element itself (including padding, border)

var box2 = document.querySelector('.box2');
console.log(box2.offsetWidth);  //280
console.log(box2.offsetHeight);  //280

The
above methods of element.offsetParent get the parent element with positioning, if the positioning is not set, return the body

console.log(son.offsetParent);  //.box1

2. The
client does not contain a border, and the rest is similar to the offset
clientTop returns the size of the upper border, clientLeft returns the size of the left border, clientWidth returns
the width without borders, and clientHeight returns the height without borders

3. The
scroll series returns a numeric value without a unit
1. element.scrollTop: returns the upper distance of the
scrolled 2. element.scrollLeft: returns the left distance of the scrolled
3. element.scrollWidth: returns its actual Width, without border (the width of the content in the box)
4. element.scrollHeight: returns its actual height, without border (the height of the content in the box)
5. window.pageYOffset gets the head of the page being rolled The distance
window.pageXOffset gets the left distance of the page being scrolled