home ~ projects ~ socials

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

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.
elementClientHeight:
314
elementClientLeft:
3
elementClientTop:
3
elementClientWidth:
169
elementOffsetHeight:
320
elementOffsetLeft:
439
elementOffsetTop:
288
elementOffsetWidth:
175
documentBodyScrollHeight:
9628
documentBodyScrollLeft:
0
documentBodyScrollTop:
0
documentBodyScrollWidth:
1440
elementScrollHeight:
782
elementScrollLeft:
0
elementScrollTop:
0
elementScrollWidth:
432
getBoundingClientRectBottom:
607
getBoundingClientRectLeft:
439
getBoundingClientRectHeight:
320
getBoundingClientRectRight:
614
getBoundingClientRectTop:
287
getBoundingClientRectWidth:
175
getBoundingClientRectX:
439
getBoundingClientRectY:
287
getClientRectsBottom0:
607
getClientRectsLeft0:
439
getClientRectsHeight0:
320
getClientRectsRight0:
614
getClientRectsTop0:
287
getClientRectsWidth0:
175
getClientRectsX0:
439
getClientRectsY0:
287
windowInnerHeight:
718
windowInnerWidth:
1440
windowOuterHeight:
580
windowOuterWidth:
780
windowScreenLeft:
230
windowScreenTop:
230
windowScrollX:
0
windowScrollY:
0

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