先日仕事の関係でJavascriptを使って要素の位置を取得する方法を調べていたので、こちらで紹介します。
いくつか方法があったのですが、以下の2通りを紹介します。
1. Javascriptで特定の要素の座標を取得
htmlの記述 (任意ですが例として下記の内容を記述します)
<body onLoad="getY();"> <p>text...text...text...text...text...text...text...text...text...text...text...text...text...</p> <div id="container"> <h1 id="head1">Heading1</h1> <h2 id="head2">Heading2</h2> <h3 id="head3">Heading3</h3> </div> </body>
cssの記述(これも任意ですが例として下記の内容を記述します)
#container {
width: 400px;
height: 400px;
background-color: #ccc;
padding: 0;
margin: 0;
}
#head1 {
width: 200px;
height: 80px;
background-color:#666;
}
#head2 {
width: 180px;
height: 60px;
background-color: #333;}
#head3 {
width: 180px;
height: 60px;
background-color: #000;
color:#fff;}
Javascriptの記述
/*座標の取得*/
function getY(){
/*id名head1を取得*/
var ele = document.getElementById("head1");
var bounds = ele.getBoundingClientRect();
/*id名head1のx座標を取得*/
var x = bounds.left;
/*id名head1のy座標を取得*/
var y = bounds.top;
/*警告パネルにhead1のx座標とy座標を表示*/
alert("head1の座標" + x + " : " + y );
}
以上の記述で取得した座標が警告パネルに表示されます。
座標の値はbody要素の左上を原点に算出されます。
上記の例で取得したhead1のx座標は8、y 座標は61.4375となります。
2. jQueryで特定の要素の座標を取得
htmlとcssの記述は上と同じ内容になるので割愛します。
Javascriptの記述
function getY2(){
/*jQueryでid名head3の座標を取得*/
var offset = $( "#head3" ).offset();
/*警告パネルにhead3のx座標とy座標を表示*/
alert( "head3の座標" + offset.top + " : " + offset.left ); }
以上です。
上記の記述で取得した座標が警告パネルに表示されます。
最後に座標の値に応じて指示を出す場合は、Javascript内に下記のような記述を追記します。
/*変数mに初期値500を代入*/
var m = 500;
/*offset.topの値が500を越えたらページが切り替わる(Googleへジャンプ)*/
if(offset.top>m){
document.location="http://www.google.co.jp"}
以上です。
要素の位置が基準位置以上に達した際に、ページ変異するという仕組みを作成するために利用しました。
シンプルな記述なので便利に使えるかと思います。
