ソフトウェア開発者の日常

こだわりなく書きたいことを書いていきます。

JavaScriptでdiv要素の位置を設定

意外なところに落とし穴があって、悩みましたが解決しました。

f:id:AJYA:20150319125008j:plain
photo credit: Selvin George via photopin (license)

ブラウザをリサイズされているときでも、JavaScriptを使ってdiv要素を表示領域の中央に配置したくて調べました。

表示領域のサイズを取得する方法

リサイズされたときの表示の領域のサイズは、Internet Explorer 8と、Internet Explorer 11、Safari 8で試すと、

document.documentElement.clientWidth
document.documentElement.clientHeight

で取得できました。

厳密にはスクロールバーを考慮する/しないの違いがあるかもしれませんが、厳密に中央でなければならないわけでもないので問題ありません。

表示領域の中央に配置する方法

div要素を表示領域の中央に配置するために、以下のようにしました。

element = top.document.getElementById("message");
element.style.position = "fixed";
element.style.width  = 450;
element.style.height = 200;
element.style.left   = (document.documentElement.clientWidth - 450) / 2;
element.style.top    = (document.documentElement.clientHeight - 200) / 2;
element.style.zIndex = 9999;
element.style.display = "block";
element.innerHTML = "abc";

試してみると、Internet Explorer 8では思ったとおりの位置になりましたが、Internet Explorer 11Safari 8は思ったとおりの位置になりません。
なぜできないのか調べていくと、単位をつけていないためでした。

以下のようにして再度試したら、Internet Explorer 11Safari 8でもできました。

element = top.document.getElementById("message");
element.style.position = "fixed";
element.style.width  = "450px";
element.style.height = "200px";
element.style.left   = (document.documentElement.clientWidth - 450) / 2 + "px";
element.style.top    = (document.documentElement.clientHeight - 200) / 2 + "px";
element.style.zIndex = 9999;
element.style.display = "block";
element.innerHTML = "abc";

pxをつけなけいけないことに気がつくまでに時間がかかりました。