style.top和style.left不起作用

Question

我写了一个脚本，当按下按钮时，formatdialog div会重新调整大小。问题是我不知道为什么我的JavaScript代码不起作用。我可以调整宽度和高度的大小，但是无论出于何种原因，顶部和左侧都无法调整。

对我而言，可能导致问题的原因没有意义。Firebug没有给我任何错误。javascript只是调整宽度和高度的大小，并忽略top和left属性。我猜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

我遇到了类似的问题，发现设置 .top 直到我将元素设置为 "position:absolute" 后才起作用。

Answer 2

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

\n\n

#formatdialog {\n\nFormatDialog\n

\n\n

你有一个错字。

\n\n

元素 id 是formatdialog 但您正在尝试调用FormatDialog

\n\n

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

\n\n

你的代码应该是这样的：

\n\n

<div id="formatdialog">\n\n</div> \n\nvar elem = document.getElementById(\'formatdialog\');\nelem.style.top = "10%";\nelem.style.left = "10%";\nelem.style.width = "600px";\nelem.style.height = "500px";\n\n#formatdialog \n{\n    left:25%;\n    top:25%;\n    width:400px;\n    height:200px;\n    position:absolute;\n    z-index:100;\n    padding:2px;\n    font:10pt tahoma;\n    border:1px solid gray;\n    background-color:orange;\n}\xe2\x80\x8b\n

\n\n

如果您想使用 Pascal 大小写，请确保 elementId 和 class 中的相同

\n\n

检查这个小提琴

\n