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で画像が存在すれば表示、なければノーイメージ画像を表示

やりたかった事は以下の通り。・画像のURLはcode.jpgみたいになってる ...

: プラグインを使用せず、jQueryでオートページャー

プラグインを使わずにオートページャーを作りたかった。内容としては、・ターゲ ...

: jQueryの指定されたイベントを実行する(trigger)

jQueryで $('ID').trigger('click'); というみたこ ...

: jQueryで画像(タグ内)のsrc情報を取得する場合

すぐに出てこなかったのでメモ。 $('#test').attr('src'); ...

: formでdisplay:none;にしてても送信される

formで特定の部分をdisplay:none;で非表示にしてても内容は送信さ ...

: lightboxをファイルアップロードなしで使う(CDN)方法

本番実装時ならともかく、テスト用とかでlightboxみたいによく使うプラグイン ...

: jQueryでドロワーメニューの作成

■やりたかった事スマホ用サイトにドロワーメニューを設置したかった。 &nbsp ...

: jQselectableでセレクトボックスをリッチにする

入力フォームみたいなもので元々はテキストボックス内に都道府県を入れてもらうとい ...

jQueryのfind時に複数のセレクタ指定

<div id="hoge">
	<a href="aaa.html">aaa</a>
	<div>
		bbb
	</div>
</div>

<div>

bbb

</div>

みたいなソース ...

: 日付入力のテキストフォームにカレンダープラグインを導入

やりたかった事と制限は下記の通り。・日付入力のテキストフォームにカレンダープラ ...

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

jQueryで要素のleftやwidthを取得

サンプル

ソース

関連記事