Javascripｔ勉強

ChromeExtensions

ChromeExtensionsの開発のためにJavascriptを勉強した
まずブラウザの表示部分の左上に常にコマンドの表示がしたいので
ある要素を常に左上に表示するためのスクリプトを書いてみた

ある要素を絶対位置指定して配置したい場合

	var adiv=document.createElement("div");
	adiv.innerHTML="<span style=\"background-color: #FFFF33\">ADIV</span>";
	adiv.style.position="absolute";
	adiv.style.left=300;
	adiv.style.top=300;
        adiv.id="adiv"
	document.body.appendChild(adiv);

スタイルを指定するところで絶対座標表示にして、あとはX,Y座標を決めてやればいいわけだ
この場合は（300,300）を指定している
ついでに後からこのオブジェクトを取得するためにIDをつけている。

表示部分の左上に要素を配置する

ブラウザがどこを表示しているのかを把握する必要がある
試行錯誤したがよくわからないので次のサイトを参考にした
http://archiva.jp/web/javascript/get_page-size.html

function getScrollPosition() {
	var obj = new Object();
	obj.x = document.documentElement.scrollLeft || document.body.scrollLeft;
	obj.y = document.documentElement.scrollTop || document.body.scrollTop;
	return obj;
}

これで座標が取得できたので先ほどの要素を絶対座標を指定して生成するところで利用すれば
初期状態の配置ができるが、コードは省略

要素をスクロールしても常に左上に配置する

画面をスクロールしてもある要素が表示部分の左上にあるようにするためには

  • スクロールイベントにイベントを登録
  • イベント中で要素の位置を変更

が必要だ

window.addEventListener("scroll",captureScroll,false);

function relocateAdivline(){
	var position=getScrollPosition();
	var adiv=document.getElementById("adiv");
	adiv.style.pixelLeft=position.x;
	adiv.style.pixelTop=position.y;
}
function captureScroll(e){
	relocateAdiv();
}

こんな感じでできた
一見簡単だが、結構試行錯誤した。
まずadivを作ったときはadiv.style.leftを使ったけど、このコード中ではなぜか全然うまくいかなかった
そこでadiv.style.pixelLeftを使ったところうまくいった。なぜだかよくわからない。
もしかしたらstyle.leftは変更しても、更新するイベントが生じないのかもしれない