html中的javascript间距

发布于 2024-07-13 11:15:58 字数 283 浏览 10 评论 0原文

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

这段 JS 代码位于我的 HTML 表单中。（每个函数会根据输入参数显示不同的值。）

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

我正在考虑将其放入表格中，但我不确定这是否是最好的方法

原文

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

This snippet of JS is in my HTML sheet.
(Each function will display a different value based on the input parameter.)

How do I set the spacing between these images? I would like them all on the same row (as they are by default) but with the spacing between.

I am thinking about to put it in a table, but I am not sure if that is the best way

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

忘你却要生生世世 2024-07-20 11:15:58

更简洁的方法是将它们分开：

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

The cleaner approach is going to be to separate them:

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

Then style them using CSS; use float:left to put them in a row and add padding:right to space them out.

I said this was the clean way; the less-clean way is to keep what you have but add document.write(" ") in between each image.

回复收藏 0 原文

苄①跕圉湢 2024-07-20 11:15:58

不要直接在页面上编写代码，而是创建具有唯一 id 的通用容器（例如

< / div >），并使用 innerHTML 属性。

回复收藏 0 原文

感情洁癖 2024-07-20 11:15:58

啊。不要在需要避免的地方使用内联脚本，并且在可以直接创建和插入 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：

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

Ugh. Don't use inline scripts where you avoid them, and don't use innerHTML when direct DOM creation and insertion is available. And use CSS to handle the positionin/spacin aspect. Images already display inline, so wrapping divs around them individually is just complicating things.

Without knowing what your method does, I'm guessing, but this is what you should be doing roughly:

<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

Why is innerHTML bad? Whilst it's true it can be faster, it's not always true, and it's close anyway, but then speed isn't really the problem with JS. However innerHTML:

opens up an injection attack
can create memory leaks when it destroys pre-existing elements with event handlers
being string based is error prone
doesn't return a reference to what you just inserted, and can't clone

回复收藏 0 原文

~没有更多了~