style.top和style.left不工作

Question

我写了一个脚本，当按下一个按钮时，formatdialog div会被调整大小。 问题是我无法弄清楚为什么我的javascript代码不起作用。 我能够调整宽度和高度，但无论出于何种原因，顶部和左侧都无法调整。

什么可能导致问题对我没有意义。 Firebug不会给我任何错误。 javascript只调整宽度和高度，忽略顶部和左侧属性。 我猜测css属性导致了问题，我只是不知道是什么。

CSS：

#formatdialog {
            display:none;
            left:25%;
            top:25%;
            width:400px;
            height:200px;
            position:absolute;
            z-index:100;
            background:white;
            padding:2px;
            font:10pt tahoma;
            border:1px solid gray
        }

使用Javascript：

function FormatDialogResize(){
        var elem = document.getElementById('FormatDialog');
        elem.style.top = "10%";
        elem.style.left = "10%";            
        elem.style.width = "600px";
        elem.style.height = "500px";
    }

我也尝试过：

function FormatDialogResize(){
        var elem = document.getElementById('FormatDialog');
        elem.style.top = 10+"%";
        elem.style.left = 10+"%";           
        elem.style.width = "600px";
        elem.style.height = "500px";
    }

谢谢。

Answer 1

为什么类名缺少classId中元素ID的pascal大小写

#formatdialog {

FormatDialog

你有一个错字。

元素ID是formatdialog但你试图调用FormatDialog

var elem = document.getElementById('FormatDialog');

你的代码应该是这样的：

<div id="formatdialog">

</div> 

var elem = document.getElementById('formatdialog');
elem.style.top = "10%";
elem.style.left = "10%";
elem.style.width = "600px";
elem.style.height = "500px";

#formatdialog 
{
    left:25%;
    top:25%;
    width:400px;
    height:200px;
    position:absolute;
    z-index:100;
    padding:2px;
    font:10pt tahoma;
    border:1px solid gray;
    background-color:orange;
}​

如果你想使用Pascal外壳，请确保它在elementId和class中是相同的

检查这个小提琴

Answer 2

我有一个类似的问题，并发现设置.top在我将元素设置为“position：absolute”之后才会起作用。