6

我写了一个脚本，当按下按钮时，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";
    }

谢谢。

4

2 回答 2

4

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

于 2019-04-12T21:33:54.767 回答
2

为什么你的类名缺少 classId 中元素 ID 的帕斯卡大小写

#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 相同

检查这个小提琴

于 2012-09-21T17:41:16.157 回答