【jQuery-7】要素の幅と高さ、位置を調べるメソッド【超初心者向き】

 

今回は要素の幅と高さ、位置を調べるメソッドを使って、それを実際に出力してみましょう。

今のところ、これは実際にどんな用途があるのか疑問に思うかもしれませんが、こういうものもあるんだなーくらいでOKだと思います。

※エディタは自由に書き換えることが可能です。自分で書き換えてみるなどして動きを試してみてください。

【width()】指定した要素の幅を取得！

See the Pen Untitled by taichi (@taichi_na) on CodePen.

1行目の<h2>の幅を調べて。その結果を2行目の<p>に書き出す命令です。

$("h2").width()

この部分で<h2>の幅を取得しています。

そして html メソッドを使って<p>に書き出しています。

文字列を出力するには""で囲み、スクリプトで得た数値を出力する部分はそのまま記述します。

【height()】指定した要素の高さを取得！

See the Pen height() by taichi (@taichi_na) on CodePen.

先ほどの幅を取得するメソッドと全く同じ仕組みです。

$("h2").height()

そして下の<p>にその結果を出力するために html メソッドを使っていますね。

【offset()】指定した要素の位置を取得する

See the Pen offset() by taichi (@taichi_na) on CodePen.

これもページに動きをつける際に、元々の座標を取得するのに使うなど、意外に登場機会の多いメソッドです。存在だけは覚えておきましょう。

上の例では、<h2>要素で結果を出力しています。