javascript en el espaciamiento html

StackOverflow https://stackoverflow.com/questions/547480

  •  23-08-2019
  •  | 
  •  

Pregunta 

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

Este fragmento de JS está en mi hoja de HTML. (Cada función mostrará un valor diferente basado en el parámetro de entrada.)

¿Cómo puedo configurar el espacio entre estas imágenes? Me gustaría que todos en la misma fila (como están por defecto) pero con el espacio entre.

Estoy pensando en ponerlo en una mesa, pero no estoy seguro de si esa es la mejor manera

¿Fue útil?

Solución

El enfoque más limpio va a ser para separarlos: 

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

A continuación, estilo de ellos el uso de CSS; float:left utilizar para ponerlos en una fila y añadir a padding:right el espacio fuera.

Me dijo que era la forma limpia; la forma menos limpia es mantener lo que tiene además de añadir document.write("&nbsp;") entre cada imagen.

Otros consejos

En lugar de escribir código directamente en la página, crear contenedor común (por ejemplo,

) con id único y escribir imágenes en HTML uno por uno en este contenedor usando innerHtml propiedad

Uf. No utilice guiones en línea donde los evitamos, y no utilice innerHtml cuando la creación directa e inserción DOM está disponible. Y el uso de CSS para manejar el / los aspectos Spacin POSICIONAM. Imágenes ya la visualización incorporada, por lo divs envolver alrededor de ellos de forma individual se acaba de complicar las cosas.

Sin saber lo que hace su método, supongo, pero esto es lo que debería estar haciendo más o menos: 

<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 Referencia métodos DOM

¿Por qué es malo innerHtml? Si bien es cierto que puede ser más rápido, no es siempre verdad, y está cerca de todos modos, pero luego la velocidad no es realmente el problema con JS. Sin embargo innerHtml:

  • abre un ataque de inyección
  • puede crear pérdidas de memoria cuando se destruye elementos preexistentes con controladores de eventos
  • siendo cadenas basada es propenso a errores
  • no devuelve una referencia a lo que acaba de insertar, y no se puede clonar
Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top