6

ボタンを押すと、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";
    }

ありがとう。

4

2 に答える 2

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とクラスが同じであることを確認してください

このフィドルをチェックしてください

于 2012-09-21T17:41:16.157 に答える