ブロッコリーを克服するまでプログラミング

プログラミングとか趣味とかを報告します。

Javascript:IEの互換モードで画像のウィンドウ中央揃えをする

※当記事は頭の悪いやり方を行っている可能性があるので、温かい目で見ていただけると幸いです。

 

様々なわけがあり、IEの互換モードで画像(対象は画像ではないのですが、本稿では画像として扱います)のウィンドウ中央揃えを行いたくなりました。調べてみた限り、いろいろな方法があるんだと思いますが、私が妄想で書いたJavascriptを記録で残しておきます。

 

イメージとしてはこんな感じです。(わかりにくかったらすみません)現在のウィンドウサイズと中央揃えしたい要素のサイズがわかれば、ウィンドウ中央への表示ができるのです。しかし、IEの互換モードでは、innerWidthやinnnerHeightが使えないので、allObject(height:100%, width100%)の要素を無理に作り、こいつのサイズを取得することで、間接的にウィンドウサイズを取得しました。

 

しかし、この方法では、中央揃えしたい要素よりもウィンドウサイズが小さくなってしまった場合、中央揃えしたい要素が画面外に配置されてしまいます。そのため、中央揃えしたい要素よりウィンドウサイズが小さかった場合の処理も追加しました。

 

f:id:atwtama:20170903234351p:plain

 

 // JAVASCRIPT ***********************************************************************************************************************

window.onresize = moveObject;

function moveObject(){
 var tmpWidthPos = parseInt(document.getElementById('allObjects').offsetWidth, 10);
 var tmpHeightPos = parseInt(document.getElementById('allObjects').offsetHeight, 10);

 if(tmpWidthPos <= document.getElementById('mainImg').offsetWidth){
  document.getElementById('allObjects').style.left = parseInt(document.getElementById('mainImg').offsetWidth, 10);
 }else{
  document.getElementById('allObjects').style.left = '50%';
 }

 if(tmpHeightPos <= document.getElementById('mainImg').offsetHeight){
  document.getElementById('allObjects').style.top = parseInt(document.getElementById('mainImg').offsetHeight, 10);
 }else{
  document.getElementById('allObjects').style.top = '50%';
 }
}

// 読み込み時にレイアウトを変更するため
window.onload = function(){
 moveWindow();
}

// CSS *******************************************************************************************************************************

#allObjects{
 position:absolute;
 margin: -300px 0 0 -400px;
 height:100%;
 width:100%;
 top:50%;
 left:50%;
}

#mainImg{
 position:absolute;
 top:0px;
 left:0px;
 width:800px;
 height:600px;
}

// HTML ******************************************************************************************************************************

<body>
 <div id = "allObjects">
  <p><img id = "mainImg" src="./image/test.png" /></p>
 </div>
</body>