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

JavaScript implements three common web effects (offset, client, scroll 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

Recommend

js canvas implements verification code and obtains verification code function

This article example shares the specific code of ...

How to change the domestic image source for Docker

Configure the accelerator for the Docker daemon S...

Detailed explanation of Vue development website SEO optimization method

Because the data binding mechanism of Vue and oth...

Using HTML to implement a voting website cheating scheme that restricts IP

This is a cheating scheme for voting websites wit...

js handles account logout when closing the browser

Table of contents Classic approach question Furth...

HTML tags list and usage instructions

List of HTML tags mark type Name or meaning effec...

A brief discussion on spaces and blank lines in HTML code

All consecutive spaces or blank lines (newlines) ...

In-depth understanding of MySQL long transactions

Preface: This article mainly introduces the conte...

Differences between proxy_pass in two modules in nginx

1. The proxy_pass directive of the 1.ngx_stream_p...

Method of Vue component document generation tool library

Table of contents Parsing .vue files Extract docu...

Prometheus monitors MySQL using grafana display

Table of contents Prometheus monitors MySQL throu...

Detailed explanation of adding dotted lines to Vue element tree controls

Table of contents 1. Achieve results 2. Implement...

Ubuntu16.04 installation mysql5.7.22 graphic tutorial

VMware12.0+Ubuntu16.04+MySQL5.7.22 installation t...

Detailed explanation of JavaScript array deduplication

Table of contents 1. Array deduplication 2. Dedup...

How to delete all contents in a directory using Ansible

Students who use Ansible know that Ansible only s...