preface

In the development process of mobile terminal, we often encounter the situation that we need to obtain the width and height of mobile terminal node, but the attributes such as offsetHeight, offsetTop, clientHeight, clientTop and so on are very easy to confuse, and it is impossible to identify the specific representative from the word alone. I tried to distinguish them by words, but when I opened Baidu and searched “clientHeight”, I only got the following answer (except Mosaic, no Photoshop). I didn’t understand it, but I was blown away! From then on I abandoned the idea of recognizing words.

Today we are going to sort it out again and draw some pictures, hoping to give you and me a clearer understanding of these wide energies.

instructions

  • Body returns the body node,
  • documentElementReturn documentrootThe node, < HTML >, is used after a Document Type declaration (DTD)
    • For compatibility, it is generally written as:
    / / example:
const scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
Copy the code
    • For the convenience of description, this article uses body to express

clientRelated attributes

  • clientHeight
  • clientWidth

Returns the width and height of the visible area of the element on the page, a read-only property, without borders, scrollbars, or margins

  • clientTop
  • clientLeft

Returns the value of the border of the element on the page, a read-only property that returns a rounded integer

offsetRelated attributes

Offset means “deviation” and has a series of properties in JS.

  • offsetHeight
  • offsetWidth

Returns the width and height of the visible area element on the page, a read-only property, excluding margins

  • offsetTop
  • offsetLeft

Returns the distance between the element and the nearest parent element with position: relative, absolute, and fixed. If none of the parent elements match the condition, the element offsetParent is body

scrollRelated attributes

  • scrollTop

Returns the height at which the element was rolled, or how far it slid, and writable property (value only if there is a scrollbar, otherwise 0

  • scrollHeight

Returns the actual height of the contents of the element object, including the contents of the overflow portion

The resources

  • developer.mozilla.org/zh-TW/

other

Please let me know if there are any mistakes, and I will correct them as soon as possible

Screen. Height, availheight, innerHeight, etc. If you are interested, draw some pictures for you