Styling and Layout

Element Sizing and Scrolling

You can get information about an element's size and scroll position:

  • offsetWidth / offsetHeight: Full size of an element, including borders
  • clientWidth / clientHeight: Size of the content area inside the element (excluding borders and scrollbars)
  • scrollWidth / scrollHeight: Full scrollable area of the element
  • scrollLeft / scrollTop: How much of the element is scrolled horizontally/vertically

Example:

let div = document.querySelector('div');
console.log("Full width:", div.offsetWidth);
console.log("Content width:", div.clientWidth);
console.log("Scrollable width:", div.scrollWidth);
console.log("Scrolled from left:", div.scrollLeft);

Window Sizes and Scrolling

You can also get information about the browser window:

  • window.innerWidth / window.innerHeight: Size of the browser window viewport
  • document.documentElement.clientWidth / clientHeight: Size of the document
  • window.pageXOffset / pageYOffset: Current scroll position

Example:

console.log("Window width:", window.innerWidth);
console.log("Document width:", document.documentElement.clientWidth);
console.log("Scrolled from top:", window.pageYOffset);