jQueryで要素のleftやwidthを取得

2018/08/22 2018/08/28

jQueryで要素のposition(leftやtop)とwidthとheightを取得したかった。また該当する要素はレスポンシブ対応されていたので可変だった。以下に対応方法をメモ。

サンプル

http://sample.taitan916.info/offset/

調べたい要素となっている部分をクリックすると右側にleft / top / width / heightの値が表示される。

ソース

#html
<div id="check">調べたい要素</div>
<div id="answer"></div>

#jQuery
$(function(){
	$('#check').click(function(){
		var offset = $(this).offset();
		var check = $(this);
		var answer = '\
			left:' + offset.left + 
			'<br>top:' + offset.top + 
			'<br>width:' + check.width() + 
			'<br>height' + check.height()
		;
		$('#answer').html(answer);
	});
});

#html

<div id="check">調べたい要素</div>

#jQuery

$(function(){

$('#check').click(function(){

var offset = $(this).offset();

var check = $(this);

var answer = '\

left:' + offset.left +

'<br>top:' + offset.top +

'<br>width:' + check.width() +

'<br>height' + check.height()

;

$('#answer').html(answer);

});

- jQuery

: アコーディオンメニュー

簡単にアコーディオンメニューを導入したい時に便利に使えたプラグイン。 ■サンプ ...

: jQueryでボタンをクリックしてクリップボードにコピー

■2015/11/01追記以下記事でライブラリとか無しで同様の機能がつけられる ...

: jQueryでiframe内の要素を呼び出し

jQueryでiframeで開いたbody内の内容が欲しかった。 ■jQuery ...

: jQueryでチェックボックスの全チェック&チェック解除

フォームのチェックボックスで「全てにチェックを入れる」「全てのチェックを外す」と ...

: adblock(広告削除)設定している場合はページを表示させない

iPhoneのSleipnirでネットをしていると「広告がブロックされたのでペー ...

: FullCalendarでラベル毎に表示切替したい

Googleカレンダーだとページ左側にマイカレンダーというのがあり、その中に任意 ...

: jQueryで配列の値を検索

やりたかった事は、配列の中に特定の値があるかどうか検索し、その後の分岐を行いた ...

: jquery.cookie.jsでcookieを取り扱う

機能拡張の依頼があってそのページを見たら jquery.cookie.jsが読み ...

: 画像アップロード前の時点で画像が選択されているか確認

やりたかった事は、フォーム内で画像をアップロードする際、ちゃんと画像がローカル ...

: jQueryの最新バージョン呼び出しとバージョン確認

<script type="text/javascript" src="h ...

PREV: Opauthで「Please change the…」エラー
NEXT: 可変要素内の文字を丸める

jQueryで要素のleftやwidthを取得

サンプル

ソース

関連記事