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

这个 JS 片段在我的 HTML 表单中。（每个函数将根据输入参数显示不同的值。）

如何设置这些图像之间的间距？我希望它们都在同一行（默认情况下），但它们之间有间距。

我正在考虑把它放在桌子上，但我不确定这是否是最好的方法

4

3 回答 3

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 一张一张地写入此容器中。

于 2009-02-13T20:19:47.370 回答
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 回答