jQueryで要素の長さと位置情報を取得する方法

前にjQueryで要素の位置情報を取得した時に位置のズレで嵌ってしまったので、長さと位置情報の取得方法をまとめてみました。

jQueryで要素の長さと位置情報を取得する方法について、実際のスクリプトを交えて紹介します。

jQueryで要素の長さと位置情報を取得する方法
  1. 要素の長さを取得する方法
  2. 位置情報を取得する方法

要素の長さを取得する方法

横幅を取得
width()width
innerWidth()width + padding
outerWidth()width + padding + border
outerWidth(true)width + padding + border + margin

width

縦幅を取得
height()height
innerHeight()height+ padding
outerHeight()height+ padding + border
outerHeight(true)height+ padding + border + margin

height

長さは取得は上記の通りです。実際にスクリプトでは以下のように記載します。

HTML
<div class="sampleBlock" id="sampleSize">Click</div>
CSS
.sampleBlock{
    width: 200px;
    height: 10px;
    margin: 5px;
    padding: 20px;
    border: 10px solid #ccc;
    text-align: center;
}
jQuery
$('#sampleSize').click(function(){
    var width = $('#sampleSize').width();
    var innerwidth = $('#sampleSize').innerWidth();
    var outerwidth = $('#sampleSize').outerWidth();
    var outerwidth2 = $('#sampleSize').outerWidth(true);
    var height = $('#sampleSize').height();
    var innerheight = $('#sampleSize').innerHeight();
    var outerheight = $('#sampleSize').outerHeight();
    var outerheight2 = $('#sampleSize').outerHeight(true);

    var str = "width() = " + width + "\n";
    str += "innerWidth() = " + innerwidth + "\n";
    str += "outerWidth() = " + outerwidth + "\n";
    str += "outerWidth(true) = " + outerwidth2 + "\n";
    str += "height() = " + height + "\n";
    str += "innerHeight() = " + innerheight + "\n";
    str += "outerHeight() = " + outerheight + "\n";
    str += "outerHeight(true) = " + outerheight2;

    alert(str); 
});
Click

位置情報を取得する方法

要素の位置
offset().left要素の左位置
offset().top要素の上位置
イベントの位置
event.pageXページのX座標
event.pageYページのY座標
event.clientXウィンドウ内のX座標
event.clientYウィンドウ内のY座標
スクロールの位置
document.body.scrollLeftスクロール座標の左位置(標準モード)
document.body.scrollTopスクロール座標の上位置(標準モード)
document.documentElement.scrollLeftスクロール座標の左位置(互換モード)
document.documentElement.scrollTopスクロール座標の上位置(互換モード)

pageX,pageYはCSSや画像によって若干ずれが発生する可能性があります。

実際に取得してみると以下ようになります。

jQuery
var offset = $('#samplelocation').offset();
$('#offsetX').text(offset.left);
$('#offsetY').text(offset.top);

$('#samplelocation').mousemove(function(e){        
    $('#scrollLeft').text(document.body.scrollLeft || document.documentElement.scrollLeft);
    $('#scrollTop').text(document.body.scrollTop || document.documentElement.scrollTop);
    $('#pageX').text(e.pageX);
    $('#pageY').text(e.pageY);
    $('#clientX').text(e.clientX);
    $('#clientY').text(e.clientY);
});
マウスを乗せて下さい
offsetX
offsetY
scrollLeft
scrollTop
pageX
pageY
clientX
clientY

マウスをボックスの上に位置に当てるとわかりやすいですが、「offsetY」と「pageY」で若干のズレが発生しています。

jQueryで位置情報を取得するときは、このような位置のズレの回避には「ClientY」と「scrollTop」を使用します。「scrollTop + ClientY」とすると「offsetY」とほぼ同じ値が取得できます。

当ページでは横スクロールが発生しない作りとなっているため分かりずらいですが、x座標も同様にズレが発生するため「pageX」ではなく「scrollLeft + ClientX」を使用した方が正確な値が取得できます。

divider

Trackback URL

http://webnonotes.com/javascript-2/jquery-offset/trackback/

No Comments Yet

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>