133

私はとを持って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;

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

何が悪いのかわかりません。

私はMozillaFirefoxを使用しています。

編集

<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>
4

7 に答える 7

265

使用しているプロパティは、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デザイナーがワイドとはどういう意味かという定義を変更したい場合、美しく維持されているJavaScriptコードをいじくり回す必要はありません。JavaScriptコードは変更されませんが、アプリケーションのテーマは簡単にカスタマイズできます。

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

于 2012-04-12T06:05:00.120 に答える
19

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

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-12T08:17:26.060 に答える
2

コードのタイプミスを修正します（document関数の3行目と4行目でスペルが間違っており、onclickイベントハンドラーを次のように変更しますonclick="show_update_profile()"。問題ありません。@jmortのアドバイスは適切です。切り替える2つのcssクラスを設定するだけです。 javascriptの間に-それは物事を簡単にします。

要素にイベントハンドラーを割り当てるために、element.addEventListenerをチェックアウトすることもできます。

于 2012-04-12T07:01:08.277 に答える
0

javascript:プレフィックスを削除し、JavaScriptコードのように不明なIDの部分を削除すると、'black_fade'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-12T06:50:34.980 に答える
0

注意してくださいspan！

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

をに変更spanしdivます。

于 2015-09-11T14:49:56.807 に答える
-1

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

于 2012-04-12T06:28:02.357 に答える
-2

ドキュメントを使用する必要があります。ドキュメントインターフェイスは、ブラウザに読み込まれたWebページを表し、Webページのコンテンツへのエントリポイントとして機能します。

もっと知る

document.getElementById('div_register').style.width='500px';
于 2021-04-11T22:33:43.393 に答える