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

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

Table of contents

1. Element offset series

2. Element Visible Area Client Series

3. Element scrolling series

JavaScript pre-analysis, object details

When writing HTML links, always add forward slashes to subfolders to reduce HTTP requests

Detailed explanation of the implementation example of group ranking in Mysql tutorial

Examples of using temporary tables in MySQL

Detailed introduction to CSS priority knowledge

Form submission page refresh does not jump

In-depth explanation of Set and WeakSet collections in ES6

Summary of how to use bootstrap Table

JS object copying (deep copy and shallow copy)

MySQL solution for creating horizontal histogram

Recommend

A brief discussion on MySql views, triggers and stored procedures

How to modify the user and group of a file in Linux

Sample code for a simple seamless scrolling carousel implemented with native Js

Cleverly use CSS3's webkit-box-reflect to achieve various dynamic effects

MySQL reports an error: Can't find file: './mysql/plugin.frm' solution

Website Color Schemes Choosing the Right Colors for Your Website

Several CSS3 tag shorthands (recommended)

Super simple implementation of Docker to build a personal blog system

Detailed explanation of the whole process and steps of installing clion on Ubuntu16.04

MySQL 5.7.17 installation and configuration graphic tutorial

How to implement scheduled backup of MySQL in Linux

How to expand the disk partition for centos system

Solution to the gap between divs

Detailed process of installing logstash in Docker

Detailed explanation of Vue.js directive custom instructions