JavaScript в интервале HTML - PullRequest
Новая
       13

JavaScript в интервале HTML

1 голос
/ 13 февраля 2009 
<SCRIPT LANGUAGE="JavaScript">  
DynamicImage1(xx) DynamicImage2(yy) DynamicImage3(zz)   
</SCRIPT>

Этот фрагмент JS находится в моем листе HTML. (Каждая функция будет отображать различное значение в зависимости от входного параметра.)

Как установить интервал между этими изображениями? Я хотел бы, чтобы они были в одном ряду (как они есть по умолчанию), но с интервалом между ними

Я собираюсь положить его в стол, но я не уверен, что это лучший способ

Ответы [ 3 ]

1 голос
/ 13 февраля 2009

Вместо того, чтобы писать код прямо на странице, создайте общий контейнер (скажем,

) с уникальным идентификатором и запишите изображения HTML в этот контейнер по одному, используя innerHTML собственность.
1 голос
/ 13 февраля 2009

Тьфу. Не используйте встроенные сценарии там, где вы их избегаете, и не используйте innerHTML, когда доступно прямое создание и вставка DOM. И использовать CSS для обработки позиционирования / 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:

  • открывает инъекционную атаку
  • может создавать утечки памяти, когда уничтожает уже существующие элементы с помощью обработчиков событий
  • на основе строк подвержен ошибкам
  • не возвращает ссылку на то, что вы только что вставили, и не может клонировать
1 голос
/ 13 февраля 2009

Более чистый подход будет разделять их: 

<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;") между каждым изображением.

...