1 
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 之前，我能否获得 SO FAR 元素的宽度和高度（在添加具有特定字体大小的文本之后）？我尝试了 window.getComputedStyle() 但它不起作用， div.style.width/height 也不起作用。

4

1 回答 1

0

我使用类似的东西将其临时添加到 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.

希望有帮助！

于 2013-11-01T16:12:52.303 回答