Question

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

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

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

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

Answer 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(" ")。

Answer 2

不是直接在页面上编写代码，而是使用唯一ID创建公共容器（例如，＆lt; div id =“images_container”＆gt;＆lt; / div＆gt;）并使用{{将图像HTML逐个写入此容器3}}属性。

Answer 3

唉。不要在避免使用内联脚本的情况下使用内联脚本，并且在直接创建和插入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 methods reference

为什么innerHTML不好？虽然它可以更快，它不是总是是真的，而且it's close无论如何，但是速度并不是JS的问题。但是innerHTML：

打开了注射攻击
在使用事件处理程序破坏预先存在的元素时可能会造成内存泄漏
基于字符串容易出错
不会返回您刚插入的内容的引用，也无法克隆

html间距的javascript

3 个答案: