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

Ответ 1

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

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

Ответ 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() } )

Ответ 3

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

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

Ответ 4

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

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

Ответ 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

Ответ 6

/**
 * Get bounding client rect for an element (not exists at current DOM tree)
 * @param {!HTMLElement} el
 * @return {!Promise<!ClientRect>}
 */
function getElementRect(el) {
  return new Promise(resolve => {
    const element = el.cloneNode(true);
    element.style.visibility = "hidden";
    element.style.position = "absolute";
    document.body.appendChild(element);

    resolve(element.getBoundingClientRect());
    element.remove();
  });
}

const div = /** @type {!HTMLElement} */ (document.createElement("div"));
div.innerHTML = "<p>Hello</p><br/>";

// Execute
(async () => {
  const rect = await getElementRect(div);
  console.log(rect.width);
})();

DEMO