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

style 属性是字符串，最后需要一个单位：

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 回答
0

为什么不使用简单的 css，将宽度设为百分比，

width: 75%;
于 2013-07-20T10:53:58.787 回答