Home

Get the Width, Height, and Position Details of an HTML Element In JavaScript

February 2025

This Content Has Moved

I ended up building this at html-sizes.alanwsmith.com to make it a stand-alone example that won't break when I'm messing with this site.

Warning!

Everything below is old content. I'm keeping it for now, but the html-sizes.alanwsmith.com page is the place to go.

Original example

Scroll this

Lorem ipsum consequat 
imperdiet libero porttitor. 
Porta libero venenatis 
ullamcorper. 
Risus sit aliquam 
proin aliquet. 
Varius tincidunt 
quam. 

InestcrasvehiculaultriceseuismodCommodofaucibus

Facilisis id lacus. 
In mollis magna etiam diam. 
Venenatis euismod neque vestibulum orci. 
Mollis rutrum diam fermentum lacus enim.

Hac semper blandit in ullamcorper. 
Accumsan sodales mauris amet rhoncus congue. 
Vel viverra fringilla ex. 
Consectetur at vel aliquam. 

Velit fusce maximus dapibus. 
Curabitur feugiat luctus. 
Sollicitudin lobortis eget rhoncus lacinia est. 
Erat viverra neque urna blandit.
JavaScript
function elementClientHeight(selector) {
  const el = document.querySelector(selector);
  const value = el.clientHeight;
  return Math.floor(value);
}
JavaScript
function elementClientLeft(selector) {
  const el = document.querySelector(selector);
  const value = el.clientLeft;
  return Math.floor(value);
}
JavaScript
function elementClientTop(selector) {
  const el = document.querySelector(selector);
  const value = el.clientTop;
  return Math.floor(value);
}
JavaScript
function elementClientWidth(selector) {
  const el = document.querySelector(selector);
  const value = el.clientWidth;
  return Math.floor(value);
}
JavaScript
function elementOffsetHeight(selector) {
  const el = document.querySelector(selector);
  const value = el.offsetHeight;
  return Math.floor(value);
}
JavaScript
function elementOffsetLeft(selector) {
  const el = document.querySelector(selector);
  const value = el.offsetLeft;
  return Math.floor(value);
}
JavaScript
function elementOffsetTop(selector) {
  const el = document.querySelector(selector);
  const value = el.offsetTop;
  return Math.floor(value);
}
JavaScript
function elementOffsetWidth(selector) {
  const el = document.querySelector(selector);
  const value = el.offsetWidth;
  return Math.floor(value);
}
JavaScript
function documentBodyScrollHeight(selector) {
  const value = document.body.scrollHeight;
  return Math.floor(value);
}
JavaScript
function documentBodyScrollLeft(selector) {
  const value = document.body.scrollLeft;
  return Math.floor(value);
}
JavaScript
function documentBodyScrollTop(selector) {
  const value = document.body.scrollTop;
  return Math.floor(value);
}
JavaScript
function documentBodyScrollWidth(selector) {
  const value = document.body.scrollWidth;
  return Math.floor(value);
}
JavaScript
function elementScrollHeight(selector) {
  const el = document.querySelector(selector);
  const value = el.scrollHeight;
  return Math.floor(value);
}
JavaScript
function elementScrollLeft(selector) {
  const el = document.querySelector(selector);
  const value = el.scrollLeft;
  return Math.floor(value);
}
JavaScript
function elementScrollTop(selector) {
  const el = document.querySelector(selector);
  const value = el.scrollTop;
  return Math.floor(value);
}
JavaScript
function elementScrollWidth(selector) {
  const el = document.querySelector(selector);
  const value = el.scrollWidth;
  return Math.floor(value);
}
JavaScript
function getBoundingClientRectY(selector) {
  const el = document.querySelector(selector);
  const rect = el.getBoundingClientRect();
  return Math.floor(rect.y);
}
JavaScript
function getBoundingClientRectX(selector) {
  const el = document.querySelector(selector);
  const rect = el.getBoundingClientRect();
  return Math.floor(rect.x);
}
JavaScript
function getBoundingClientRectWidth(selector) {
  const el = document.querySelector(selector);
  const rect = el.getBoundingClientRect();
  return Math.floor(rect.width);
}
JavaScript
function getBoundingClientRectHeight(selector) {
  const el = document.querySelector(selector);
  const rect = el.getBoundingClientRect();
  return Math.floor(rect.height);
}
JavaScript
function getBoundingClientRectTop(selector) {
  const el = document.querySelector(selector);
  const rect = el.getBoundingClientRect();
  return Math.floor(rect.top);
}
JavaScript
function getBoundingClientRectLeft(selector) {
  const el = document.querySelector(selector);
  const rect = el.getBoundingClientRect();
  return Math.floor(rect.left);
}
JavaScript
function getBoundingClientRectRight(selector) {
  const el = document.querySelector(selector);
  const rect = el.getBoundingClientRect();
  return Math.floor(rect.right);
}
JavaScript
function getBoundingClientRectBottom(selector) {
  const el = document.querySelector(selector);
  const rect = el.getBoundingClientRect();
  return Math.floor(rect.bottom);
}
JavaScript
function getClientRectsY0(selector) {
  const el = document.querySelector(selector);
  const rects = el.getClientRects();
  const rect = rects[0];
  return Math.floor(rect.y);
}
JavaScript
function getClientRectsX0(selector) {
  const el = document.querySelector(selector);
  const rects = el.getClientRects();
  const rect = rects[0];
  return Math.floor(rect.x);
}
JavaScript
function getClientRectsWidth0(selector) {
  const el = document.querySelector(selector);
  const rects = el.getClientRects();
  const rect = rects[0];
  return Math.floor(rect.width);
}
JavaScript
function getClientRectsHeight0(selector) {
  const el = document.querySelector(selector);
  const rects = el.getClientRects();
  const rect = rects[0];
  return Math.floor(rect.height);
}
JavaScript
function getClientRectsTop0(selector) {
  const el = document.querySelector(selector);
  const rects = el.getClientRects();
  const rect = rects[0];
  return Math.floor(rect.top);
}
JavaScript
function getClientRectsLeft0(selector) {
  const el = document.querySelector(selector);
  const rects = el.getClientRects();
  const rect = rects[0];
  return Math.floor(rect.left);
}
JavaScript
function getClientRectsRight0(selector) {
  const el = document.querySelector(selector);
  const rects = el.getClientRects();
  const rect = rects[0];
  return Math.floor(rect.right);
}
JavaScript
function getClientRectsBottom0(selector) {
  const el = document.querySelector(selector);
  const rects = el.getClientRects();
  const rect = rects[0];
  return Math.floor(rect.bottom);
}
JavaScript
function windowInnerHeight(selector) {
  return Math.floor(window.innerHeight);
}
JavaScript
function windowInnerWidth(selector) {
  return Math.floor(window.innerWidth);
}
JavaScript
function windowOuterHeight(selector) {
  return Math.floor(window.outerHeight);
}
JavaScript
function windowOuterWidth(selector) {
  return Math.floor(window.outerWidth);
}
JavaScript
function windowScreenLeft(selector) {
  return Math.floor(window.screenLeft);
}
JavaScript
function windowScreenTop(selector) {
  return Math.floor(window.screenTop);
}
JavaScript
function windowScrollX(selector) {
  return Math.floor(window.scrollX);
}
JavaScript
function windowScrollY(selector) {
  return Math.floor(window.scrollY);
}
end of line

References