BinaryDevelop
  1. ホーム
  2. javascript

[解決済み] JavaScriptでDIVの幅と高さを設定する

2022-06-22 20:21:16

質問

私は div と id="div_register" . を設定したいのですが width をJavaScriptで動的に設定したい。

私は以下のコードを使っています。 

getElementById('div_register').style.width=500;

が、このコードの行は機能していません。

また、単位を px を使ってみましたが、まだうまくいきません。 

getElementById('div_register').style.width='500px';

と 

getElementById('div_register').style.width='500';

と 

getElementById('div_register').style.width=500px;

が、このコードのどれもが私には機能していません。

何が間違っているのかわかりません。

Mozilla Firefoxを使用しています。

EDIT 

<html>
    <head>
        <title>Untitled</title>
        <script>
            function show_update_profile() {
                document.getElementById('black_fade').style.display='block';
                //document.getElementById.('div_register').style.left=((window.innerWidth)-500)/20;
                document.getElementById('div_register').style.height= "500px";
                document.getElementById('div_register').style.width= '500px';
                //alert('kutta');
                  document.getElementById('div_register').style.display='block';
                document.getElementById('register_flag').value= 1;
                document.getElementById('physical_flag').value= 0;
                document.getElementById('cultural_flag').value= 0;
                document.getElementById('professional_flag').value= 0;
                document.getElementById('lifestyle_flag').value= 0;
                document.getElementById('hobby_flag').value= 0;
                //alert(window.innerWidth);
            }
        </script>
        <style>
            .white_content {
                display:none;
            }
        </style>
    </head>
    <body>
        <div id="main">
            <input type="button" onclick="javascript:show_update_profile();" id="show" name="show" value="show"/>
        </div>
        <div id="div_register">
            <table cellpadding="0" cellspacing="0" border="0">
                <tr>
                    <td>
                      welcome 
                    </td>
                </tr>
            </table>
        </div>
    </body>
</html>

どのように解決するのですか？

FirefoxやChromeなど、IE以外のブラウザでは、使用しているプロパティが動作しない場合があります。すべてのブラウザで動作させるためには、以下を追加することもお勧めします。 

document.getElementById('div_register').setAttribute("style","width:500px");

クロスコンパチビリティのために、やはりプロパティを使用する必要があります。順序も重要かもしれません。たとえば、私のコードでは、JavaScript でスタイル プロパティを設定する場合、まず style 属性を設定し、次にプロパティを設定します。 

document.getElementById("mydiv").setAttribute("style","display:block;cursor:pointer;cursor:hand;");
document.getElementById("mydiv").style.display = "block";
document.getElementById("mydiv").style.cursor = "hand";

したがって、あなたにとって最もクロスブラウザ互換性のある例は、次のようになります。 

document.getElementById('div_register').setAttribute("style","display:block;width:500px");
document.getElementById('div_register').style.width='500px';

また、スタイルを管理するもっと簡単な方法は、CSS クラスセレクタを使用して、スタイルを外部 CSS ファイルに配置することです。コードがより保守的になるだけでなく、ウェブデザイナーと実際に友達になれるかもしれませんよ。 

document.getElementById("div_register").setAttribute("class","wide");

.wide {
    display:block;
    width:500px;
}

.hide {
    display:none;
}

.narrow {
    display:block;
    width:100px;
}

これで、複数のプロパティを呼び出す代わりに、class属性、つまり1つのプロパティを追加したり削除したりするだけで、簡単にできるようになりました。さらに、ウェブデザイナーが「幅が広い」という意味の定義を変更したいとき、美しく維持されている JavaScript のコードを探し回る必要がありません。JavaScript のコードはそのままで、アプリケーションのテーマを簡単にカスタマイズすることができます。

このテクニックは、コンテンツ (HTML) と動作 (JavaScript) およびプレゼンテーション (CSS) を分離するというルールに従ったものです。

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します