Native js obtains browser window and element width and height common method collection

  • 2021-07-12 04:59:53
  • OfStack

Window visible area width: document. documentElement. clientWidth document. body. clientWidth;

Height of window visible area: document. documentElement. clientHeight document. body. clientHeight;;

Window visible area width + edges and scroll bars: document. body. offsetWidth;

Window visible area height + edges and scroll bars: document. body. offsetHeight;

Width of actual content: document. body. scrollWidth;

Height of actual content: document. body. scrollHeight;

The distance the scroll bar pulls down is rolled up: document. documentElement. scrollTop window. pageYOffset document. body. scrollTop;

Scroll bar side pull is rolled up distance: document. body. scrollLeft document. documentElement. scrollLeft;

On the body of the webpage: window. screenTop;;

Left of the main body of the webpage: window. screenLeft;;

Width of element: obj. offsetWidth;

Height of element: obj. offsetHeight;

Upward displacement relative to parent element: obj. offsetTop; (If the containing element of the element does not contain a scroll bar)

Left displacement relative to parent element: obj. offsetLeft; (If the containing element of the element does not contain a scroll bar)


Related articles: