0

ブラウザー ウィンドウに合わせて列の幅と高さを設定できるように、javascript を使用して列の幅と高さを設定する方法を理解しようとしています。私は次のコードを考え出した。しかし、それは機能していません。助けてください

<script type="javascript">
function size()
{
                    document.getElementById("body").style.width=window.innerWidth;
document.getElementById("body").style.height=window.innerHeight;
var width=document.getElementById("body").style.width;
var height=document.getElementById("body").style.height;

document.getElementById("header").style.height=(.15*height);
document.getElementById("loginbox").style.height=(.15*height);
document.getElementById("navigation").style.height=(.05*height);
document.getElementById("leftpanel").style.height=(.70*height);
document.getElementById("contentarea").style.height=(.75*height);
document.getElementById("addcolumn").style.height=(.75*height);
document.getElementById("footer").style.height=(.10*height);

document.getElementById("header").style.width=(.75*width);
document.getElementById("loginbox").style.width=(.25*width);
document.getElementById("navigation").style.width=(width);
document.getElementById("leftpanel").style.width=(.20*width);
document.getElementById("contentare").style.width=(.65*width);
document.getElementById("addcolumn").style.width=(.15*width);
document.getElementById("footer").style.width=(width);
}    
</script>

要件に応じて、css を使用して列をフロートします。そして、本体で size() 関数を呼び出しています ( onload=size() )

しかし、機能していません

4

3 に答える 3

2

スタイル属性は文字列であり、最後にユニットが必要です:

document.getElementById("addcolumn").style.width=(width + "px");

幅と高さを次のように設定する必要がある可能性もあります。

var width = window.innerWidth;
var height = window.innerHeight
于 2013-07-20T09:55:17.463 に答える
0

これを達成するための別の方法をお勧めします。これは簡単に管理できます。

function size() {
    var props = {
        header: {
            width: .75,
            height: .15
        },
        loginbox: {
            width: .25,
            height: .15
        },
        navigation: {
            width: 1,
            height: .05
        },
        leftpanel: {
            width: .2,
            height: .7
        },
        contentarea: {
            width: .65,
            height: .75
        },
        addcolumn: {
            width: .15,
            height: .75
        },
        footer: {
            width: 1,
            height: .1
        }
    },
        bodyElement = document.getElementById('body'),
        width = bodyElement.style.width = window.innerWidth,
        height = bodyElement.style.height = window.innerHeight;

    for (var id in props) {
        if (!props.hasOwnProperty(id)) continue;
        var element = document.getElementById(id),
            prop = props[id];
        element.width = (width * prop.width) + "px";
        element.height = (height * prop.height) + "px";
    }
}

注: テストはしていませんが、動作するはずです。

于 2013-07-20T10:22:44.340 に答える