DOM

How to Get Element Dimensions

Use getBoundingClientRect() for accurate dimensions

Quick Answer (2024 ES6+ Way)

javascript

const element = document.querySelector('.box');
const rect = element.getBoundingClientRect();
console.log(rect.width, rect.height);

Live Example

javascript

const box = document.querySelector('.box');

// Get dimensions with position
const rect = box.getBoundingClientRect();
console.log({
  width: rect.width,
  height: rect.height,
  top: rect.top,
  left: rect.left
});

// Get scroll dimensions
console.log({
  scrollWidth: box.scrollWidth,
  scrollHeight: box.scrollHeight,
  clientWidth: box.clientWidth,
  clientHeight: box.clientHeight
});

// Window dimensions
console.log({
  windowWidth: window.innerWidth,
  windowHeight: window.innerHeight,
  documentHeight: document.documentElement.scrollHeight
});

// Check if element is visible
const isVisible = rect.width > 0 && rect.height > 0;

Common Variations

Get Offset Position

javascript

function getOffset(element) {
  const rect = element.getBoundingClientRect();
  return {
    top: rect.top + window.pageYOffset,
    left: rect.left + window.pageXOffset
  };
}

Responsive Check

javascript

const isMobile = window.innerWidth < 768;
const isTablet = window.innerWidth >= 768 && window.innerWidth < 1024;

❌ Don't Do This (Outdated Way)

Avoid offsetWidth/offsetHeight for precise measurements

javascript

// DON'T DO THIS - less accurate, no decimal values
const width = element.offsetWidth;

Browser Support

✓ Works in all modern browsers (IE9+)

#dom#dimensions#size