После небольшого исследования выяснилось, что не всегда данный размер возможно получить обычными способами. Будь то методы 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, которые позволяют выполнять данную функцию и может быть даже в более лучшем виде. Однако мне хотелось отразить на чистом языке, как это все происходит. Надеюсь, этот код сэкономит немного времени вашей драгоценной жизни ;)