Question

我确定答案是否定的，但是可以确定之前>元素的宽度是否附加到DOM？

一旦附加，我知道我可以使用offsetWidth和offsetHeight。

谢谢

Answer 1

诀窍是显示元素（display：block），但也隐藏它（visibility：hidden）并将其位置设置为绝对位置，这样它就不会影响页面流。

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

你可以像这样调用它，确保返回值（感谢Sam Fen指出它！）：

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

Answer 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

附加到DOM之前的DOM元素宽度

6 个答案: