JavaScript implements three common web effects (offset, client, scroll series)

1. Element offset series
2. Element Visible Area Client Series
3. Element scrolling series

1. Element offset series

Offset is translated as offset. We use the offset series of related attributes to dynamically get the position (offset), size, etc. of the element.

Get the position of an element relative to its positioned parent element
Get the size (width and height) of the element itself
Note: The returned values do not have units.

Common attributes of offset are:

For example: given a child box and a parent box, and giving them a certain size, let's see how these properties are obtained:

    <style>
        *{
            margin: 0px;
            padding: 0px;
        }
        .father{
            position: relative;
            margin-left: 50px;
            margin-top: 10px;
            width: 200px;
            height: 200px;
            background-color: brown;
        }
        .son{
            width: 100px;
            height: 100px;
            background-color: cornflowerblue;
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="son"></div>
    </div>
    <script>
        var father = document.querySelector('.father');
        var son = document.querySelector('.son')
        console.log('father.offsetLeft',father.offsetLeft);
        console.log('father.offsetTop',father.offsetTop);
        console.log('son.offsetWidth',son.offsetWidth);
        console.log('son.offsetHeight',son.offsetHeight);
    </script>
</body>

The print result is:

We know that offset can help us get the size and parent element of an element, but the style attribute can also get related attributes, so what is the difference between them?

offset

offset can get the style value in any style sheet
The values obtained by the offset series are unitless.
offsetWidth includes padding+border+width
OffsetWidth and other properties are read-only properties, which can only be obtained but not assigned.

style

style.width gets a string with units
style.width gets the value excluding padding and border
style.width is a read-write property that can be obtained or assigned

2. Element Visible Area Client Series

Client is translated as client. We use the client series of related attributes to obtain relevant information about the element's visible area. The border size, element size, etc. of the element can be obtained dynamically through the related properties of the client series.

For example, given a box with a border, return these properties and see the result.

<style>
        .box{
            width: 200px;
            height: 200px;
            background-color: darkorchid;
            border: 20px solid #ccc;
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
<script>
    var box = document.querySelector('.box')
    console.log('box.clientWidth:'+box.clientWidth);
    console.log('box.clientWidth:'+box.clientWidth);
    console.log('box.clientWidth:'+box.clientWidth);
    console.log('box.clientTop:'+box.clientTop);
</script>

The result is:

It can be found that the box size obtained by the client series does not include the box border.

3. Element scrolling series

Scroll means scrolling. We can use the related properties of the scroll series to dynamically get the size of the element, scroll distance, etc.

For example, let’s print the scroll series properties of the box in the above example to see the result.

 <style>
        .box{
            width: 200px;
            height: 200px;
            background-color: darkorchid;
            border: 20px solid #ccc;
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
<script>
    var box = document.querySelector('.box')
    console.log('box.scrollWidth:'+box.scrollWidth);
    console.log('box.scrollHeight:'+box.scrollHeight);
    console.log('box.scrollLeft:'+box.scrollLeft);
    console.log('box.scrollTop:'+box.scrollTop);
</script>

The result is:

We find that the height and width of the box we get are our given values, which are the same as the values obtained by the client series, so what is the difference between them? Now we add content to the box that exceeds the height of the box:

 <div class="box">
   Wang Huan is studying front-end<br><br>
   Wang Huan is studying front-end<br><br>
   Wang Huan is studying front-end<br><br>
   Wang Huan is studying front-end<br><br>
   Wang Huan is studying front-end<br><br>
   Wang Huan is studying front-end<br><br>
   Wang Huan is learning front-end

The print result is:

It can be found that the height of the printed box has become larger. In fact, this value refers to the actual height of the box after adding the text.

You will also find that the values of box.scrollLeft and box.scrollTop printed twice are both 0. What does this mean?

Now we use overflow:auto to display the content outside the box as a scroll bar, and then add a scroll event to it, as shown below:

 var box = document.querySelector('.box')
    box.addEventListener('scroll',function(){
        console.log('box.scrollTop:'+box.scrollTop);
    })

The effect is;

It is found that the value obtained changes with the scrolling. In fact, box.scrollTop returns the upper distance that is scrolled away, as shown in the following figure:

The above is the details of how to implement three common web effects (offset, client, scroll series) with JavaScript. For more information about JavaScript web effects, please pay attention to other related articles on 123WORDPRESS.COM!

You may also be interested in:

Summary of knowledge points of offset, client and scroll in js
Summary of JS front-end knowledge points: offset, scroll, client, bubbling, and application of event objects
Summary of properties of offset, client, and scroll in JavaScript
Detailed explanation of how to use JavaScript's offset, client, and scroll
Detailed explanation of three commonly used web effects in JavaScript

<<: The hottest trends in web design UI in 2013 The most popular UI designs

>>: How to make the height of child div fill the remaining space of parent container in CSS