Ширина элемента DOM перед добавлением в DOM

Question

Я уверен, что ответ - нет, но возможно ли определить ширину элемента до того, как будет добавлен в DOM?

После добавления я знаю, что могу использовать offsetWidth и offsetHeight.

Спасибо

Answer 1

Хитрость заключается в том, чтобы показать элемент (display: block), а также скрыть его (видимость: скрытый) и установить его абсолютное положение, чтобы он не влиял на поток страниц.

Класс MooTools Element.Measure делает это, как упоминал Оскар.

Answer 2

Элемент Mootools Element.Measure, о котором упоминал Оскар, потрясающий. Для тех, кто использует jQuery, вот быстрый плагин, который выполняет то же самое:

$.fn.measure = (fn)->
  el = $(this).clone(false)
  el.css
    visibility: 'hidden'
    position:   'absolute'
  el.appendTo('body')
  result = fn.apply(el)
  el.remove()
  return result

Вы можете назвать это так, убедившись, что возвращаете значение (спасибо Сэму Фену за указание на это!):

width = $('.my-class-name').measure( function(){ return this.width() } )

Answer 3

Что вы можете сделать с MooTools - это использовать класс Element.Measure - это означает, что вы вводите элемент в DOM, но держите его скрытым. Теперь вы можете измерить элемент, фактически не показывая его.

http://mootools.net/docs/more/Element/Element.Measure

Answer 4

Это невозможно, по крайней мере, не совсем точно, потому что стилизация влияет на эти свойства, и от того, где они находятся, зависит, как их стилизовать и какие правила влияют на них.

Например, размещение <p></p> на странице будет по умолчанию равным ширине тела, если оно будет добавлено к нему как дочерний элемент, но если вы добавите его внутрь, например, <div style="width: 100px;"></div>, вы увидите, как это быстро меняется вещи.

Answer 5

Немного изменил код.Вот чистое решение JS:

function measure(el, fn) {
    var pV = el.style.visibility, 
        pP = el.style.position;
        
    el.style.visibility = 'hidden';
    el.style.position = 'absolute';
    
    document.body.appendChild(el);
    var result = fn(el);
    el.parentNode.removeChild(el);
    
    el.style.visibility = pV;
    el.style.position = pP;
    return result;
}

var div = document.createElement('div');
div.innerHTML = "<p>Hello</p><br/>";

alert(div.offsetHeight); // 0

alert(measure(div, function(el){return el.offsetHeight})); // 68