Skip to content

Instantly share code, notes, and snippets.

@kafkahw

kafkahw/frontend-tricks.md

Last active July 17, 2019 19:14
Show Gist options
  • Save kafkahw/9e9193e9adf7f3c08ce3b6e195b32e05 to your computer and use it in GitHub Desktop.
Save kafkahw/9e9193e9adf7f3c08ce3b6e195b32e05 to your computer and use it in GitHub Desktop.
Download ZIP
Frontend Tricks
Raw
frontend-tricks.md

Calculate heights

  • clientHeight - visible content
  • offsetHeight - visible content + scrollbar
  • scrollHeight - all content (including overflown part)

Find offset to nearest positioned parent

  • element.offsetTop

Find parent

  • element.parentElement or element.parentNode

Find siblings

  • element.nextSibling or element.nextElementSibling
  • element.previousSibling or element.previousElementSibling

Inner text

  • innerHTML
  • innerText
  • textContent

NOTE:

  1. textContent returns the text content of all elements, while innerText returns the content of all elements, except for <script> and <style> elements.
  2. innerText will not return the text of elements that are hidden with CSS (textContent will).

Postion:

  • static
  • relative
  • absolute
  • fixed
  • sticky
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment