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

中是相同的

选中此Fiddle

Answer 2

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

style.top和style.left不工作

2 个答案: