javascript - 纯javascript动态调整字体大小

Question

我有一个类似的代码:

var a = document.createElement('div');
a.style.width = '200px';
a.style.fontSize = fontSize(a.offsetWidth, 5);
a.innerHTML = 'Example';
document.body.appendChild(a);

function fontSize(reference, factor){
  return (reference*factor)/100 + 'px';
}

但是当我运行它时，元素字体大小似乎是 0px。 console.log 返回预期值。

类似的代码适用于我尝试过的 JavaScript 对象:

var Object = function(target){
  var default = {
    fontSize: fontSize(target.clientWidth, 5);
  }
}

jsFiddle here

我做错了什么？

Answer 1

The HTMLElement.offsetWidth read-only property returns the layout width of an element. Typically, an element's offsetWidth is a measurement which includes the element borders, the element horizontal padding, the element vertical scrollbar (if present, if rendered) and the element CSS width.

当您尝试读取 offsetWidth 时，新创建的 div 元素尚未附加到文档，因此它的布局宽度为 0 code> 因此最终的字体大小为 0px。

您需要先将 div 放入文档中，然后再测量它在文档中占用的空间。

或者，您需要使用 offsetWidth 以外的值(例如 style.width)。