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

: chardin.jsを利用して注釈を入れる

簡易マニュアルとかでむっちゃ使えそう。 ■chardin.js http://h ...

: jQueryプラグインを作成する方法

jQueryのプラグインを作ってみたかった。というのも大抵のものはググったらあ ...

: jQueryのCSS変更

jQueryでCSSを触る際、 $("#aaa").css('height',' ...

: 要素の表示or非表示

今まで要素の表示or非表示をCSSで操作する際、 display:none; / ...

: 簡単にtable内をソート

やりたかった事は、・テーブル内でのソート・内容は文字、数値、日時・PHPじ ...

: jQueryでjsonデータを処理(parseJSON)

他社が作成したシステムのちょっと改修案件があった。設置したもののどうも動かないと ...

: Flashを用いずJavaScriptでコピー&カット機能を実装する

以前メモったようなFlashを用いる方法ではなく、WebAPIでコピー& ...

: jQueryで関数処理中にブラウザのブロック(intro.js)

Ajaxで処理を行っている間、他の処理を行わせたくなかった。「now load ...

: jQueryのtoggleに引数

社内のソースで、 $(".hoge").toggle(flg == 1? fal ...

: bootstrap-datetimepickerについて

日付のピッカーはよく見るけど、時間のピッカーはあまり見ないので、普通のセレクト ...

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

jQueryで要素のleftやwidthを取得

サンプル

ソース

関連記事