JavaScript:onResizeでウィンドウ幅にフィットし続ける

goto_jp 453views 更新:2014年10月22日

まず下記関数を作ります。

function fitWindow($target) {
    var w = document.documentElement.clientWidth;
    var h = document.documentElement.clientHeight;
    document.getElementById($target).style.width = w + "px";
    document.getElementById($target).style.height = h + "px";
}

ブラウザウィンドウ内の幅と高さを、ターゲットのレイヤーに埋め込む関数です。
ターゲットレイヤーはウィンドウ幅ぴったりの大きさになります。

次に下記の記述を加えます。

window.onload = function(){
    fitWindow("targetLayer");
}
window.onresize = function() {
    fitWindow("targetLayer");
}

window.onload でページの読み込み時に、また window.onresize でブラウザ幅に変化があった時に、fitWindowを呼び出して「targetLayer」のサイズを変化させています。

jQueryが使える環境だと onLoad や onResize 辺りが忘れられがちですが、応用できると便利です。

ログイン / 新規登録してコメントする

このソースコードをストックして後で利用したり、作業に利用したソースコードをまとめることができます。

こちらもお役に立つかもしれません