CSS使用Javascript

Question

我願做這樣的事情，但它不工作

window.onresize = center; 

function center() 
{ 
     var x=window.innerWidth; 
     x = x/2; 
     document.getElementById("center_div").style.marginLeft = x; 
} 

我該怎麼辦呢？

Answer 1

您必須添加px,Element.style.marginLeft不接受數字。它應該是有效的CSS屬性（margin-left）值;它可以是10px或5%或auto;

document.getElementById("center_div").style.marginLeft = x + 'px'; 

Answer 2

我認爲你要找的是css屬性margin: auto。隨機的例子（不是我的）：http://bluerobot.com/web/css/center1.html。另外，你會想要width: 50%。那是你在找什麼？讓我知道，如果需要的話，我會改變我的答案。 :)

Answer 3

您的代碼很好，但缺少一件事。你必須在X變量之後加上「px」。換句話說，它應該是： document.getElementById("center_div").style.marginLeft = x+"px"; 否則，瀏覽器將不知道它的單位。

我在jsfiddle中做了一個示例，這將是一個工作示例。嘗試一下。 http://jsfiddle.net/TLPak/

PS。我更新了代碼以包含window.onresize。 （還有一些改進，考慮了DIV的寬度。）http://jsfiddle.net/TLPak/1/通過點擊事件觸發它或在窗口調整大小事件都是好的。希望它對你有一些幫助。

function center() { 
    var x=window.innerWidth;  
    x = x/2; 

    var y = document.getElementById("center_div").offsetWidth; 
    y = y/2; 

    document.getElementById("center_div").style.marginLeft = x - y + "px"; 
} 

window.onresize = center;