Как стать автором
Обновить

Определение размеров текста

Время на прочтение 2 мин
Количество просмотров 14K
Возможно, кто-нибудь из вас сталкивался с задачей в которой крайне необходимо было бы узнать размер текстового блока в пикселях.

После небольшого исследования выяснилось, что не всегда данный размер возможно получить обычными способами. Будь то методы jQuery, prototype или обычное обращение к параметрам DOM.

Хотелось бы поделится небольшой функцией, которая может сотворить чудо, и выяснить беспрекословно требуемые размеры с помощью клонирования.



function inlineSize(el) {
  // дополнительные стили для клона, что бы мир не заметил чуда, и размеры отображались корректно
  var hiddenStyle = "left:-10000px;top:-10000px;height:auto;width:auto;position:absolute;";

  // создаем box элемент
  // для клонирования содержимого из нашего исходного inline блока
  var clone = document.createElement('div');
  
  // в обязательном порядке копируем стили с исходного элемента,
  // что бы размеры соответствовали исходнику.
  for (var i in el.style) {
    try {
      if ((el.style[i] != '') && (el.style[i].indexOf(":") > 0)) {
        clone.style[i] = el.style[i];
      }
    } catch (e) {}
  }
  
  // устанавливаем стили у клона, дабы он не мозолил глаз.
  // Учитываем, что IE не позволяет напрямую устанавливать значение аттрибута style
  document.all ? clone.style.setAttribute('cssText', hiddenStyle) : clone.setAttribute('style', hiddenStyle);

  // Переносим содержимое. Аккуратно.
  clone.innerHTML = el.innerHTML
  
  // Добавляем клон в корневой документ.
  // Так, на всякий пожарный в parent, а то вдруг элемент внутри iframe?
  parent.document.body.appendChild(clone);
  
  // Забиваем заветное.
  var rect = {width:clone.clientWidth,height:clone.clientHeight};
  
  // ...и тут же удаляем
  parent.document.body.removeChild(clone);

  // Вот собственно говоря и все.
  return rect;
}


* This source code was highlighted with Source Code Highlighter.


Тестировалось на FF2, FF3, IE7.

На данный момент существуют плагины для jQuery, extension для prototype и методы в ExtJS, которые позволяют выполнять данную функцию и может быть даже в более лучшем виде. Однако мне хотелось отразить на чистом языке, как это все происходит. Надеюсь, этот код сэкономит немного времени вашей драгоценной жизни ;)
Теги:
Хабы:
+17
Комментарии 35
Комментарии Комментарии 35

Публикации

Истории

Работа

Ближайшие события

Московский туристический хакатон
Дата 23 марта – 7 апреля
Место
Москва Онлайн
Геймтон «DatsEdenSpace» от DatsTeam
Дата 5 – 6 апреля
Время 17:00 – 20:00
Место
Онлайн