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

Question

Я уверен, что ответ отрицательный, но можно ли определить ширину элемента до, он добавлен в DOM?

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

Благодаря

Answer 1

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

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

Answer 2

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

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

Answer 3

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

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

Answer 4

Функция Mootools Element.Measure, о которой упоминается Оскар, является удивительным. Для тех, кто использует JQuery, вот быстрый плагин, который выполняет то же самое: (! Спасибо Сэм Fen за указание, что из)

$.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 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