1 
<SCRIPT LANGUAGE="JavaScript">  
DynamicImage1(xx) DynamicImage2(yy) DynamicImage3(zz)   
</SCRIPT>

この JS のスニペットは、私の HTML シートにあります。(各関数は、入力パラメーターに基づいて異なる値を表示します。)

これらの画像間の間隔を設定するにはどうすればよいですか? それらをすべて同じ行に配置したいのですが（デフォルトでは）、間隔があります。

表にしようと思っているのですが、それが最善の方法かどうかはわかりません

4

3 に答える 3

1

うーん。回避する場合はインライン スクリプトを使用しないでください。また、直接 DOM の作成と挿入が可能な場合は、innerHTML を使用しないでください。CSS を使用して、positionin/spacin の側面を処理します。画像は既にインラインで表示されているため、画像を個別に div で囲むことは事態を複雑にするだけです。

あなたのメソッドが何をしているのかわからなくても、私は推測していますが、これはあなたが大まかにやるべきことです:

<head>
    <script>
    function createImage(t,params)
    {
      var img = document.createElement('img');
      /* season img to taste (e.g. img.src = params.source? */
      t.appendChild(img);
    }

    /* bind this method to onload event or better a ready event */
    function exec()
    {
      var t = document.getElementByid('target');
      createImage(t,xx);
      createImage(t,yy);
      createImage(t,zz);
    }
    </script>
    <style>
    /* I'm not advocating px here and these are just example values */
    #target {width: 600px; text-align: center;}
    #target img {border: 0px; margin: 0 10px; } /* the margin handles the spacing */
    </style>
</head>
<body>
    <div id="target"></div>
</body>

JS DOM メソッドのリファレンス

なぜinnerHTMLが悪いのですか? 確かに高速になる可能性はありますが、常にそうであるとは限りません。とにかく近いですが、速度は JS の問題ではありません。ただし、innerHTML:

  • インジェクション攻撃を開く
  • イベント ハンドラで既存の要素を破棄すると、メモリ リークが発生する可能性があります。
  • 文字列ベースであるためエラーが発生しやすい
  • 挿入したばかりのものへの参照を返さず、複製できません
于 2009-02-13T20:52:49.990 に答える
1

よりクリーンなアプローチは、それらを分離することです。

<div id="image1">
<SCRIPT LANGUAGE="JavaScript">  
     DynamicImage1(xx)
</SCRIPT>
</div>

<div id="image2">
<SCRIPT LANGUAGE="JavaScript">  
     DynamicImage2(xx)
</SCRIPT>
</div>

<div id="image3">
<SCRIPT LANGUAGE="JavaScript">  
     DynamicImage3(xx)
</SCRIPT>
</div>

次に、CSS を使用してスタイルを設定します。を使用float:leftしてそれらを一列に並べ、追加padding:rightして間隔を空けます。

私はこれがクリーンな方法だと言いました。あまりきれいではない方法は、持っているものをそのままにしてdocument.write("&nbsp;")、各画像の間に追加することです。

于 2009-02-13T20:19:37.417 に答える
1

コードをページに直接記述する代わりに、一意の ID を持つ共通コンテナー (たとえば、< div id="images_container" >< / div >) を作成し、innerHTMLプロパティを使用してこのコンテナーに画像 HTML を 1 つずつ書き込みます。

于 2009-02-13T20:19:47.370 に答える