JavaScriptでDIVの幅と高さを設定する

divにはid="div_register"があります。 JavaScriptでwidthを動的に設定したいと思います。JavaScriptでDIVの幅と高さを設定する

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>

出典

2012-04-12 Saswat

'onload'イベントが発生した後に幅を設定しようとしましたか？ – Cyclonecode

'div_register'があなたの要素の正しいidであることを確認しましたか？たぶん私たちにいくつかのHTMLも与えてくれるでしょう... 'style.width =" 500px ";'正しいはずです。 – powerMicha

document.getElementById（ 'div_register'）。style.display = 'block'を設定してから、document.getElementById（ 'div_regsiter'）を設定してください。style.width = '500px'; – Saswat

158

あなたが使用しているプロパティは、Firefox、クロム、および他の非IEブラウザでは動作しない場合があります。すべてのブラウザでこの作品を作るために、私はまた、次の追加提案：クロス互換性のため

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

、あなたはまだプロパティを使用する必要があります。順序も重要です。あなたは次のようになりため、このように、ほとんどのクロスブラウザの互換性の例を

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

：JavaScriptでスタイルプロパティを設定するときにたとえば、私のコードでは、私はスタイル属性が最初に、その後、私はプロパティを設定する設定

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デザイナーが幅広い意味の定義を変更したい場合、美しく維持されたJavaScriptコードを掘り下げる必要はありません。 JavaScriptコードは変更されませんが、アプリケーションのテーマは簡単にカスタマイズできます。

この手法は、コンテンツ（HTML）と行動（JavaScript）とプレゼンテーション（CSS）を分離するというルールに従います。

出典

2012-04-12 06:05:00 jmort253

これは他のスタイル属性をすべてオーバーライドしませんか？質問へのコメントで述べたように、 'display：block'も設定されました。 – powerMicha

style属性を使用するときにすべてを一度に設定します。私のテストしたコードからの私の例では、私は 'display：block; cursor：pointer; cursor：hand'を同じsetAttribute呼び出しの中に入れました。あなたの人生をもっと楽にしたいなら、jQueryのようなプログレッシブJavaScriptライブラリを使用してください。私のコードで生のJavaScriptを使用した唯一の理由は、それがクライアントのWebサイトに埋め込みコード用であったため、サイトごとに実際の環境が異なるため、ライブラリの競合を回避する最も簡単な方法はそれらを使用しないことです。 – jmort253

クラス属性を使用する別の例を追加しました。この手法は、コンテンツ（HTML）と行動（JavaScript）とプレゼンテーション（CSS）を分離するルールに従います。また、スタイリングの実際の詳細を抽象的なものにするために、classNameを使いやすいクラスを用意しています。 – jmort253

-1

ボタンの属性は、JavaScriptの文字列を使用します。提供するhrefではなく、文字列を使用します。ちょうど "javascript："部分を削除してください。

出典

2012-04-12 06:28:02 jpsimons

あなたがjavascript:接頭辞を削除し、あなたのjavascriptのコードから'black_fade'のような未知のIDの部分を削除した場合、これは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>

出典

2012-04-12 06:50:34 powerMicha

+1の「javascript：」を削除します。これは、Web 1.0の長年の時代からの時代遅れの構成です。 – jmort253

私はdiv_fadeが必要です – Saswat

それをあなたの例に追加してください。さもなければスクリプトは失敗します - btw：Firefoxの 'Firebug'プラグインを知っていますか？これは多くの助けになります – powerMicha

は、あなたのコード内の誤字を修正あなたの関数の3行目の&が間違っていて、onclickイベントハンドラをread：onclick = "show_update_profile（）"に変更すると、うまくいくでしょう。jmortのアドバイスに従ってください。あなたがjavascriptで切り替える2 cssクラス - それはあなたにあなたの人生をもっと楽にして、余分なタイピングから自分を救ってください。あなたがコミットしたタイプミスは、これがより良いアプローチである理由の完全な例です。

ブラニーポイントの場合は、エレメントにイベントハンドラを割り当てるためにelement.addEventListenerもチェックする必要があります。

出典

2012-04-12 07:01:08

これは、エレメントにスタイルを適用するいくつかの方法です。以下のいずれかの例を試してください：

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';

出典

2012-04-12 08:17:26 Valli69

spanに注意してください！

myspan.styles.width='100px'は働きたくありません。

spanをdivに変更してください。

出典

2015-09-11 14:49:56

これは、 'span'がデフォルトでインライン要素であるため、その上に設定されたサイジングに従わないためです。 CSSを 'display：block'、' display：flex'、 'display：inline-block'に変更すると' div'（デフォルトではブロック要素）のように正しく動作します。 –

質問には*スパン*は一度も言及されておらず、いずれかを使用して回答することもお勧めしません。私はこの答えがどのように役立つかは分かりません。 –

奇妙なことに、これは1年前だったので、どちらかといえばどちらかというと確信が持てません！^_ ^ –

JavaScriptでDIVの幅と高さを設定する

答えて

関連する問題