Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
0
Help us understand the problem. What is going on with this article?
@titaniumkun

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

More than 1 year has passed since last update.

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

かんたん!

0
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
titaniumkun
都内在住デザイナー。RailsやNuxtなどフロント周りの技術的な備忘録など。

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
0
Help us understand the problem. What is going on with this article?