memocarilog

CSSのpositionで配置された要素の相対位置を取得する場合に、position:rightで指定が入っていれば、jQueryの css(“right”) で取得できますが、rightの指定をしていない場合は直接取得することが出来ないため、親要素や左位置などから計算して出します。

計算の仕方

下の画像のように #container の中に #example という要素が入っているとします。#container 右から #example 右辺までの距離が position:right 値になるので、それを計算します。

HTMLとCSS

HTMLとCSSは以下のような感じとします。

<div id="container">
#container	
	<p id="example">
		#example
	</p>
</div>

#container{
	position: relative;
	padding: 20px 10px;
	width: 550px;
	height: 250px;
}
#example{
	position: absolute;
	top: 60px;
	left: 100px;
	margin: 0 0 10px;
	width: 150px;
	height: 100px;
}

jQueryコード

下のコードで itemRight には300という値が入ります。これがposition:rightと同じ値になります。

var parent = $('#container');
var item = $('#example');

var itemRight = parent.innerWidth() - ( item.position().left + item.outerWidth() );	
// parent.innerWidth()で#containerの内側の横幅を取得し、
// item.position().left + outerWidth() で#container左から#example右までの値を出します。
// #containerの横幅から#example右までの値を引けば、#exampleのrightが分かります。

console.log(itemRight);