Question

function createCloudEntry(termName, fontSize) {
  var div = document.createElement("div");
  div.innerText = termName;
  div.style.fontSize = fontSize + "px";
  div.style.position = "absolute";
  div.style.display = "inline-block";
  div.style.top = getRandomPosition(0, cloudHeight - 40) + 'px';
  div.style.left = getRandomPosition(0, cloudWidth - 150) + 'px';

//document.write("Left: " + getRandomPosition(0, parseInt(cloudHeight)) + ", Top: " +   getRandomPosition(0, parseInt(cloudWidth)) + "<br/>");
//document.write(div.style.width + " | " + div.style.height + "<br/>");

  return div;

}

所以这是我的函数，我只是创建一个带有一些css属性的新div。我的问题是，在将元素添加到DOM之前，我可以获得元素的宽度和高度（在添加具有特定字体大小的文本之后）吗？我尝试了window.getComputedStyle（）但它没有用，div.style.width / height也不起作用。

Answer 1

我使用这样的东西暂时将它添加到DOM中，然后在我提取值后立即删除它。

function getElementSizing(e)
{
    document.body.appendChild(e);
    var s = {client:{w:e.clientWidth, h:e.clientHeight}, offset:{w:e.offsetWidth, h:e.offsetHeight}, scroll:{w:e.scrollWidth, h:e.scrollHeight}};
    document.body.removeChild(e);
    return s;
}

值取决于元素的类型，它的定位（绝对，相对）样式和内容，因此您需要扩展它以满足您的需求。

var div = document.createElement("div");
div.innerText = 'some text';
div.style.fontSize = 12 + "px";
div.style.position = "absolute";
div.style.display = "inline-block";

var myDivSize = getElementSizing(div);

console.log('DIV Client Width: '+myDivSize.client.w);//returns 46 in chrome.
console.log('DIV Client Height: '+myDivSize.client.h);//returns 16 in chrome.
console.log('DIV Offset Width: '+myDivSize.offset.w);//returns 46 in chrome.
console.log('DIV Offset Height: '+myDivSize.offset.h);//returns 16 in chrome.
console.log('DIV Scroll Width: '+myDivSize.scroll.w);//returns 46 in chrome.
console.log('DIV Scroll Height: '+myDivSize.scroll.h);//returns 16 in chrome.

希望有所帮助！

在JS中获取DOM外部元素的宽度和高度

1 个答案: