HTML elements such as height, offsetHeight, clientheight, scrolltop, etc

Time:2020-11-12

About some attributes of elements

In the daily development of the front-end, we often need to obtain or listen to some page properties, so we need to understand the meaning of some properties to better use these properties. Especially the following:

  1. Dimension correlation: offsetHeight, clientheight, scrollheight;
  2. Offset correlation: offsettop, ClientTOP, scrolltop, pageyoffset, scrolly;
  3. Get the relative view position: Element.getBoundingClientRect ();
  4. Get the style object of the element: Window.getComputedStyle (Element);

Definition of attributes

Definition of dimension related attributes:

  • offsetHeight: Element.offsetHeight It is a read-only attribute. It returns the value of the height PX corresponding to the element. It is an integer value and there is no decimal,

    1. The hidden element returns 0;
    2. Others return: innerheight + padding + border + margin + scrollbar of the element, but does not include the:: before or:: after pseudo element;
  • clientHeight: Element.clientHeight It is a read-only attribute. It returns the value of the height PX corresponding to the element. It is an integer value and there is no decimal,

    1. For no style or inline element, it returns 0,
    2. For HTML elements or body in weird mode, the height of the viewer, that is, the height of the entire page’s view, is returned
    3. In other cases, the innerheight + padding of the element does not include border, margin and scroll bar;
  • Scrollheight: it is a read-only attribute. It returns the value of the height PX corresponding to the element. It is an integer value with no decimal,

    1. In the case of no scrolling of child elements, and Element.clientHeight equally
    2. In the case of child element scrolling, it will be the sum of all child element’s clientheight height + self padding;
  • window.innerHeight : (browser window height, not including toolbar, menu, etc., only the height of DOM in visual area)
  • window.outerHeight : (browser window height, including toolbar, menu, etc., height of the whole browser)

About offset:

  • Offsettop: read-only attribute, which returns the top distance of the inner edge line of the nearest relative positioning parent element. In actual use, there may be incompatibility problems caused by different styles of relative positioning parent elements.
  • ClientTOP: the width of the top border
  • scrollTop:

    1. For rolling elements, it is the distance that has been rolled,
    2. For HTML, it’s window.scrollY
  • window.scrollY , alias: window.pageYOffset , the distance the root node has scrolled vertically

Relevant data needed in development

Get the height of the viewing area of the whole page: [height outside the viewing area is not required]

const height = window.innerHeight
    || document.documentElement.clientHeight
    || document.body.clientHeight;

Get the height of the whole page: [including those outside the viewing area]

const height = document.documentElement.offsetHeight
    || document.body.offsetHeight;

Get the vertical scroll height of the entire page:

const scrollTop = document.documentElement.scrollTop
    || document.body.scrollTop;

Gets the distance of the element from the top of the root node:

//For elements positioned relative to the root node
const top = Element.offsetTop;

//For elements that are not positioned relative to the root node, they need to be retrieved in a loop
getElementTop(element) {
      let actualTop = element.offsetTop
      let current = element.offsetParent

      while (current !== null) {
        actualTop += current.offsetTop
        current = current.offsetParent
      }
      return actualTop
}

//There is another method to scroll distance + distance from the top edge of the view
const top = Element.getBoundingClientRect().top + window.scrollY;

Get the distance from the top of the relative visible area of the element:

const top = Element.getBoundingClientRect().top;

Set the vertical scrolling position of the entire page:

const isCSS1Compat = ((document.compatMode || "") === "CSS1Compat");
if (isCSS1Compat) {
    document.documentElement.scrollTop = 100;
} else {
    document.body.scrollTop = 100;
}

Recommended Today

Think about open source project promoting rust search extension: quickly search rust documents in the browser address bar

Open source project name:Rust Search Extension Introduction to open source projects:Quick search for rust documents in the browser address barOpen source project type:teamProject creation time:2020 GitHub data:375 Star,18 ForkGitHub address:https://github.com/huhu/rust-search-extension Rust search extension is a plug-in that can quickly search rust documents, Crites, built-in properties and error codes in the browser address bar. It supports […]