使用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設置列寬

回答

相關問題