要素の高さを取得する方法。getBoundingClientRectとは？window.innerHeightとは？window.pageYOffsetとは？

投稿日：2020年08月05日 更新日：2021年12月30日

getBoundingClientRect

getBoundingClientRect().top

getBoundingClientRect().topはターゲットの位置を ブラウザの表示領域の左上を基点として、そこからの相対位置が示されます。 すぐ下に表示されている数字は、この要素のgetBoundingClientRect.topの値が示されています。 要素が画面上部にきたら数値は0になります。

javascript

  document.addEventListener("scroll", function(){
    const target = document.querySelector("要素のクラス名");
    const getTargetDistace = target.getBoundingClientRect().top;
    document.querySelector("要素のクラス名").textContent =
    getTargetDistace;
  }

getBoundingClientRect().bottom

getBoundingClientRect().bottomは画面の上から要素の下の部分までの高さをを示します。

window.innerHeight

window.innerHeightは現在の画面の高さを取得します。 すぐ下に表示されている数字は、今お使いのブラウザの高さの値が示されています。

Javascriptで、console.log(window.innerHeight)と記述すれば、お使いのブラウザの画面の高さを知ることができます。

window.pageYOffset と document.documentElement.scrollTop

ブラウザの上端を基準とした縦方向のページのスクロール量を取得します。 この2つはどちらも同じ値です。 すぐ下に表示されている数字は、スクロールされた値が示されています。

javascript

  document.addEventListener("scroll", function(){
    console.log(window.pageYOffset);
  }

まとめ

要素の高さを取得する方法について解説しました。最初は混乱するかもしれません。理解できれば、要素が画面に現れた時にアニメーションを付けることができ、ホームページがグッと魅力的になります。