как узнать размер в пикселях элемента созданного элемента span
 

Учебное задание: сгенерировать облако тэгов, которые лежат в массиве в div c id="tagContainer". Генерация расположения тэгов должна протекать по произвольным значениям ширины и высоты дива tagContainer. Есть ещё ньансы - слова не должны накладываться друг на друга, не должны выходить за рамки дива и тд.

Первое: я решил узнать размеры элемента, которое я создам и с этими значениями можно будет уложиться в задание. Но как узнать размер в пикселях элемента созданного span? Ведь я буду каждому span давать свой размер шрифта.

Попробовал так, но разумеется выходит undefined, так это же не объект изображения.

window.onload = function(){

  var mainContainer = document.getElementById("tagContainer");
  var eSpan01 = document.createElement("span");
  var sText01 = "Word1";
  var eTextNode01 = document.createTextNode(sText01);
  eSpan01.appendChild(eTextNode01);
  
  mainContainer.appendChild(eSpan01);
  alert(eSpan01.width); // undefined
};

window.onload = function(){
  var mainContainer = document.getElementById("tagContainer");
  var eSpan01 = document.createElement("span");
  var eDiv01 = document.createElement("div");
  var sText01 = "Word1";
  var sText02 = "Word2";
  var eTextNode01 = document.createTextNode(sText01);
  var eTextNode02 = document.createTextNode(sText02);
  eSpan01.appendChild(eTextNode01);
  eDiv01.appendChild(eTextNode02);
  mainContainer.appendChild(eSpan01);
  mainContainer.appendChild(eDiv01);
  alert(getComputedStyle(eSpan01, "").width); // показывает auto
  alert(getComputedStyle(eDiv01, "").width); // показывает всю ширину блока tagContainer
};

как же я узнаю. тогда занято пространство главного блока другим тэгом, или нет, если у всех будет одна ширина?

Заменил span на div, применил абсолютное позиционирование и float: left. Теперь всё нормально. Пока нормально.