使用Javascript设置列宽

我试图找出如何设置列宽和高度使用JavaScript，以便我可以根据浏览器窗口设置它们。我想到了下面的代码。但它不起作用。请帮助使用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浮动列根据要求。然后我打电话功能的尺寸（）身体（的onload =大小（））

但不工作

来源

2013-07-20 Maniac

你100％肯定该功能运行？ – Cherniv

所以你有一个ID是'body'的元素？看起来很奇怪，也许你想引用'document.body'？ –

我删除了'type = javascript'并添加了一个document.write（“hello”）。它被印上了 – Maniac

样式属性是字符串，需要一个单位到底：

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

机会是你也已经需要设置宽度和高度：

var width = window.innerWidth; 
var height = window.innerHeight

来源

2013-07-20 09:55:17 sabof

我加了它。但还没有工作。 – Maniac

我已经更新了答案。如果你要发布一个链接到页面或小提琴，那么人们可以更容易地帮助你。 – sabof

我建议用不同的方式来实现这一目标，这将是很容易mantainable：

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-20 10:22:44

可以解释我在for循环中的条件。我不知道它是什么意思 – Maniac

你有没有定义一个数组，并使用foreach循环？ – Maniac

我试过用它。但它没有工作。有没有什么办法可以将你的代码发送给你？ – Maniac

为什么不能用简单的CSS，使宽度的百分比，

width: 75%;

来源

2013-07-20 10:53:58

宽度的75％是什么？我必须采取一些价值，以便确定其百分比。这就是为什么我试图把价值作为宽度 – Maniac

如果div是一个孩子的东西，其宽度将根据其父母，所以如果父母的宽度是浏览器的大小，那么它会工作，你没有发布你的html –

是的。这是我的问题。如何设置父宽度等于浏览器的大小！ – Maniac

使用Javascript设置列宽

回答

相关问题