Edited at

javascriptで特定の要素の高さを取得したいとき

HTML内の特定の要素の高さを取得したいときのやりかたメモ

こんな感じのコードがあるとします。

// haml

%p#hoge
 ありがとう

%p.fuga
 うれしい

%p.fuga
 かなしい


IDの高さを取得する場合

// hogeというIDの要素を持ってくる

const hoge = document.getElementById('hoge')
// hogeの高さを取得
const hogeHeight = hoge.clientHeight


Classの高さを取得する場合

classはIDと異なり、そのページ内に複数個存在する可能性があるため、しっかり何番目のclassか指定する必要があります。これを指定しない場合、 undifined が返ってきます。

今回は上記のhamlの「うれしい」がはいってる fuga を指定しました。

//fugaというclassの要素を持ってくる

const fuga = document.getElementsByClassName('fuga')
//fugaの高さを取得
const fugaHeight = fuga[0].clientHeight

かんたん!