JavaScriptでのDIVの幅と高さの設定

108

私が持っているdivとid="div_register"。widthJavaScriptで動的に設定したい。

私は次のコードを使用しています：

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を使用しています。

編集

<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>
javascript 
— サスワット
ソース
onloadイベント発生後に幅を設定しようとしましたか？
— Cyclonecode 2012
1
チェックしましたか、それdiv_registerが要素の正しいIDですか？多分私たちにいくつかのhtmlも与えてください... style.width="500px";正しいはずです。
— powerMicha 2012
document.getElementById（ 'div_register'）。style.display = 'block'を設定してから、document.getElementById（ 'div_regsiter'）。style.width = '500px';を設定しました。
— Saswat
1
その価値については、関数の3行目と4行目の「ドキュメント」という単語にタイプミスがあります。これにより、間違いなく機能しなくなります。
— Daniel Szabo
1
onclick="show_update_profile()"代わりに使用onclick="javascript:show_update_profile()"
— Tejasva Dhyani

回答:

227

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

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

相互互換性のために、このプロパティを使用する必要があります。順序も重要です。たとえば、私のコードでは、JavaScriptでスタイルプロパティを設定するときに、最初にスタイル属性を設定してから、プロパティを設定しています。

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ファイルに配置することです。コードがはるかに保守しやすくなるだけでなく、実際にWebデザイナーと友達になります！

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

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

.hide {
    display:none;
}

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

これで、複数のプロパティを呼び出す代わりに、1つのプロパティであるクラス属性を簡単に追加および削除できます。さらに、Webデザイナがワイドとは何を意味するかの定義を変更したい場合、そのWebデザイナは、美しく維持されているJavaScriptコードをいじくり回す必要はありません。JavaScriptコードはそのままですが、アプリケーションのテーマは簡単にカスタマイズできます。

この手法は、コンテンツ（HTML）を動作（JavaScript）およびプレゼンテーション（CSS）から分離するという規則に従います。

— jmort253
ソース
1
これは他のすべてのスタイル属性を上書きしませんか？質問へのコメントで述べたように、display: blockも設定されました。
— powerMicha 2012
2
style属性を使用する場合は、すべてを一度に設定します。私のテスト済みで動作しているコードの例では、display:block;cursor:pointer;cursor:handすべてを同じsetAttribute呼び出しに入れています。生活を楽にしたい場合は、jQueryのようなプログレッシブJavaScriptライブラリを使用してください。コードで生のJavaScriptを使用した唯一の理由は、クライアントのWebサイトにコードを埋め込むためであったため、実際の環境はサイトごとに異なり、実際にライブラリの競合を回避する最も簡単な方法は、それらを使用しないことです。
— jmort253 2012
1
クラス属性を使用する別の例を追加しました。この手法は、コンテンツ（HTML）を動作（JavaScript）およびプレゼンテーション（CSS）から分離するという規則に従います。また、使いやすいclassNameを与えることで、スタイリングの実際の詳細を抽象化します。
— jmort253 2012
@jmort：+1。しかし、正確さの面では、Chrome / FireFox / Safariはすべて、問題の属性の操作をサポートしています（例：element.style.height、element.style.widthなど）
— Daniel Szabo
うーん、自分のコードでは、IE7でうまく機能させるために、非常に苦痛な試行錯誤によって発見されたいくつかの非常に具体的な手順に従う必要があったことを知っています。IE7がsetAttributeで正しく機能しない可能性があります...正確には覚えていないので、これを読者のための演習として残し、クロム/ FFなどに関する部分を削除します。コードは知っています。正しく説明していなくても動作します。:)
— jmort253
14

これらは、要素にスタイルを適用するいくつかの方法です。以下の例のいずれかを試してください。

1. document.getElementById('div_register').className = 'wide';
  /* CSS */ .wide{width:500px;}
2. document.getElementById('div_register').setAttribute('class','wide');
3. document.getElementById('div_register').style.width = '500px';
— Valli69
ソース
1

コードのタイプミスを修正します（関数の3行目と4行目で「ドキュメント」のスペルが間違っています。onclickイベントハンドラを次のように変更してください：onclick = "show_update_profile（）"を使用すると、問題ありません。 jmortのアドバイスと、JavaScriptで切り替える2つのcssクラスを設定するだけで、人生がはるかに簡単になり、余分な入力をする必要がなくなります。コミットしたタイプミスは、これが優れている理由の完璧な例ですアプローチ。

ブラウニーポイントについては、要素にイベントハンドラーを割り当てるためにelement.addEventListenerもチェックアウトする必要があります。

— ダニエル・サボー
ソース
0

削除した場合javascript:、プレフィックスをなど、未知のIDの部分を削除し'black_fade'、あなたのjavascriptのコードから、これはFirefoxで動作するはずです

凝縮された例：

<html>
    <head>
        <script type="text/javascript">
            function show_update_profile() {
               document.getElementById('div_register').style.height= "500px";
               document.getElementById('div_register').style.width= "500px";
               document.getElementById('div_register').style.display='block';
               return true;
           }
        </script>
        <style>
           /* just to show dimensions of div */
           #div_register
           {
                background-color: #cfc;
           }
        </style>
    </head>
    <body>
        <div id="main">
            <input type="button" onclick="show_update_profile();" value="show"/>
        </div>
        <div id="div_register">
            <table>
                <tr>
                   <td>
                     welcome 
                   </td>
                </tr>
            </table>
        </div>
    </body>
</html>
— powerMicha
ソース
「javascript：」の削除に関する+1。これは、Web 1.0の古くからの時代遅れの構造です。
— jmort253 2012
次に、例に追加してください。追加しない場合、スクリプトは失敗します-ところで：FirebugFirefox のプラグインを知っていますか？これはあなたに大いに役立ちます
— powerMicha
実際、私のスクリプトには何も問題がありませんでした... ...ポップアップボックスを使用していたため...それはトピックから外れていました。私のスクリプトは、JavaScriptを使用してうまく機能したためです。古くなったbtこれはエラーではありません...問題は動的に幅を更新することでした...そしてjmortのソリューションは私がソリューションの結果を出すのに役立ちました
— Saswat
承知しました。私が指摘したいのは、これらのパーツが例では欠落しており、他の問題につながることです。だから今は何も問題はあり
— ません
-1

onclickボタンの属性はJavaScriptの文字列を受け取りますが、指定したhrefではありません。「javascript：」の部分を削除するだけです。

— jpsimons
ソース
-1

気をつけてspan！

myspan.styles.width='100px' 働きたくない。

変更spanしますdiv。

— アンディB
ソース
1
これは、spanがデフォルトでインライン要素であるため、その上に設定されたサイズ設定に従わないためです。CSSを、、またはに変更するdisplay: blockとdisplay: flex、それdisplay: inline-blockはdiv（デフォルトではブロック要素）のように適切に機能します。
— Daniel T.
2
質問ではスパンについて言及していません。また、スパンを使用することを提案する回答もありません。この回答がどのように役立つかはわかりません。
— Vince Bowdren
1
奇妙なことに、これは1年前だったので、その理由もわかりません。^ _ ^
— アンディB
1
そしてに変更styles.widthしstyle.widthます。:)
— RiZKiT
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.