jQuery-less Snippets

Some vanilla JavaScript alternatives to common tasks that I used to use jQuery for.

Window Width

// without scrollbars
$(window).innerWidth()
$(window).width()

// without scrollbars
document.documentElement.clientWidth

// with scrollbars
$(window).outerWidth()

// with scrollbars
window.innerWidth

Document Width

$(document).width()

Math.max(
  document.body.scrollWidth,
  document.documentElement.scrollWidth,
  document.body.offsetWidth,
  document.documentElement.offsetWidth,
  document.documentElement.clientWidth
)

Element Width

// content
$(elem).innerWidth();

// content + padding + border
$(elem).outerWidth();

// content
elem.clientWidth;

// content + padding + border
elem.offsetWidth;

Document Scroll Position

$(window).scrollTop()

window.pageYOffset;