[jQuery] position:left で配置した要素の position:right の位置を計算する

[jQuery] position:left で配置した要素の position:right の位置を計算する

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

計算の仕方

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

Related Article

No Comments & Tracbacks

Leave a Comment

Emailは公開されません。*は必須項目です。


*


Categorys

Tags

CSS3 ダッシュボード ヘッダー トラブル コードサンプル スライドショー コンテンツ 素材 jQueryプラグイン Facebook php 引っ越し お知らせ JavaScript CSS カテゴリー Shareボタン IE 投稿タイプ seo Photoshop HTML5 レスポンシブ サイドバー ナビゲーション タクソノミー WPセキュリティ Git カスタムメニュー Macアプリ PHPリファレンス SVG query_posts API WP使い方 iTunes データベース コメント function RSS 条件分岐 get_posts() スマートフォン Sass/Compass マルチサイト機能