Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 09.11.2013, 15:55
Профессор
Отправить личное сообщение для Faab Посмотреть профиль Найти все сообщения от Faab
 
Регистрация: 16.04.2012
Сообщений: 310

как узнать размер в пикселях элемента созданного элемента 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
};
Ответить с цитированием
  #2 (permalink)  
Старый 09.11.2013, 16:11
Профессор
Отправить личное сообщение для Faab Посмотреть профиль Найти все сообщения от Faab
 
Регистрация: 16.04.2012
Сообщений: 310

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


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

Последний раз редактировалось Faab, 09.11.2013 в 16:14.
Ответить с цитированием
  #3 (permalink)  
Старый 09.11.2013, 16:46
Профессор
Отправить личное сообщение для Faab Посмотреть профиль Найти все сообщения от Faab
 
Регистрация: 16.04.2012
Сообщений: 310

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


Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Подскажите как узнать существует ли объект в памяти? Yazla Общие вопросы Javascript 2 05.11.2009 20:05
Как изменить размер картинки? Mihail Общие вопросы Javascript 1 25.10.2009 13:42
Как узнать id элемента? Вальдемар Общие вопросы Javascript 1 25.09.2009 13:31
Как узнать значение свойства СSS у элемента? Antt Общие вопросы Javascript 3 16.09.2009 17:39
как узнать размер изображения x-yuri Общие вопросы Javascript 4 24.01.2009 22:29