JavaScriptでdiv要素の位置を設定
意外なところに落とし穴があって、悩みましたが解決しました。
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 11とSafari 8は思ったとおりの位置になりません。
なぜできないのか調べていくと、単位をつけていないためでした。
以下のようにして再度試したら、Internet Explorer 11とSafari 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をつけなけいけないことに気がつくまでに時間がかかりました。