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返回期望值tho。

类似的代码适用于我尝试过的javascript对象：

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

jsFiddle here

我做错了什么？

Answer 1

HTMLElement.offsetWidth只读属性返回元素的布局宽度。通常，元素的offsetWidth是一个度量，它包括元素边框，元素水平填充，元素垂直滚动条（如果存在，如果呈现）和元素CSS宽度。

当您尝试阅读div时，新创建的offsetWidth元素尚未附加到文档中，因此其布局宽度为0，因此您最终会得到一种字体 - 0px的大小。

在测量文档中占用的空间之前，您需要将div放在文档中。

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

Answer 2

您的逻辑很好，但是您应该在尝试检索其大小之前将元素附加到DOM ：

var a = document.createElement('div'); a.style.width = '200px'; a.innerHTML = 'Example'; document.body.appendChild(a); a.style.fontSize = fontSize(a.offsetWidth, 5); function fontSize(reference, factor) { return (reference * factor) / 100 + 'px'; }

Forked your Fiddle here

Answer 3

只需将a.style.fontSize = fontSize(a.offsetWidth, 5);放在document.body.appendChild(a);之后。

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

a.style.fontSize = fontSize(a.offsetWidth, 5); // <--- Move here

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

事实上，当元素未添加到DOM时，您无法编辑CSS属性。字体大小就是其中之一。

Answer 4

在计算offsetWidth之前，您需要先将“a”附加到文档。

参考 - http://www.w3schools.com/jsref/prop_element_offsetwidth.asp

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


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

通过纯javascript动态调整字体大小

4 个答案:

Forked your Fiddle here