« PreviousNext »

Entry

JavaScriptで取得したウィンドウ内径をDOMで処理しdivをページ内の所定位置に貼り付けるには?

ページ内の所定位置に一時的にバナーやカラムを配置したいけど、構造的に簡単にはいかず、CSSをいちいち解析して外部スタイルの複数箇所を修正しなければならないとしたら...それって結構手間ですよね。特に自分が全く制作に関わってないようなサイトの場合は案外労力がかかるものです。

かなり力技ですが、JavaScriptで取得したウィンドウ内径値をベースに座標を計算した上でDOMで渡し"position:absolute"なdivをページ内の所定位置に貼り付けることで簡単に解決できるのではと考え、下記コードを書いてみました。元に戻す場合もページ内のコードを削除するだけですので簡単です。

※"hogehoge"となっている部分や数値などは内容によって変更していただく必要があります。

<div id="hogehoge" style="position:absolute;width:100px;height:100px;visibility:hidden;">hogehoge</div>

<script type="text/JavaScript">
<!--

setDiv();

//ウィンドウリサイズ時
window.onresize = function() {
  setDiv();
}

function setDiv() {
  //位置の設定
  var outputTop = 0;  //top位置
  var outputLeft = 0; //left位置(ウィンドウ中央からの調整値を定義)
  outputLeft = getBrowserWidth()/2+outputLeft;
  outputTop = outputTop+"px";
  outputLeft = outputLeft+"px";
  //スタイルの指定
  if(document.getElementById){
    document.getElementById("hogehoge").style.top = outputTop;
    document.getElementById("hogehoge").style.left = outputLeft;
    document.getElementById("lettersPatent").style.visibility = "visible";
  }
  else if(document.all){
    document.all("hogehoge").style.pixelTop = outputTop;
    document.all("hogehoge").style.pixelLeft = outputLeft;
    document.all("lettersPatent").style.visibility = "visible";
  }
}

function getBrowserWidth(){
  //ウィンドウ内径を取得
  if(window.innerWidth){
    return window.innerWidth;
  }
  else if(document.documentElement && document.documentElement.clientWidth != 0){
    return document.documentElement.clientWidth;
  }
  else if(document.body){
    return document.body.clientWidth;
  }
  return 0;
}

// -->
</script>

divのvisibilityを制御しているのは、読み込みのタイムラグで一瞬動いて見えるだろうということで、記述しています。気にならなければとってしまってもいいかと思います。

Page Top

« PreviousNext »