字体大小没有改变[重复]答案

【问题标题】：Font size isn't getting changed [duplicate]字体大小没有改变[重复]
【发布时间】：2019-08-13 13:26:41
【问题描述】：

我想定期更改元素的字体大小，但它不起作用。

我尝试使用 console.log() 来获取字体的大小，但它在大括号中返回了一些信息。（我对 JavaScript 相当陌生，所以我不知道这是否是预期的）。我尝试查找文档，但即使那样它也不起作用。

JavaScript：

var text = document.getElementById("main");
var x = setInterval(incFont, 100);
console.log(document.getElementById("main").style.fontSize);
var size = parseInt(document.getElementById("main").style.fontSize, 10);

function incFont()
{
    size = size + 1;
    document.getElementById("main").style.fontSize = "" + size;
}

HTML：

<p id="main">
    Text-Growing
</p>
<script src="function.js"></script>

console.log 的输出：

{"notifyType":"consoleItemLog","message":{"message":"","styles":"","hasFormatString":true,"fileUrl":"file:///D:/ 170911092/Lab%203/function.js","lineNumber":3,"columnNumber":1}}

【问题讨论】：

#main 元素的标记是什么样的？你的console.log() 在哪里？控制台消息到底长什么样（可以edit your question添加截图）？
您还缺少font-size 的单位后缀，即px、em 等
添加了 HTML 代码和 console.log 输出。如果我要增加从脚本中获得的大小，是否需要后缀？
console.log(size) 在第 4 行之前，但我在那之前定义了大小。
在您向我们展示的代码中没有调用console.log()，所以我们不确定您在记录什么。

标签： javascript html

【解决方案1】：

没有部分单位，见ways to specify the font size，无法更新style.fontSize。

document.getElementById("content").style返回的对象是CSSStyleDeclaration，设置属性也可以使用setProperty()。

.fontSize 样式名称实际上是font-size，因此以下任一方式都会更新 CSS；

document.getElementById("main").style.fontSize = '12px';
document.getElementById("main").style.setProperty('font-size','12px');

【讨论】：

它只增加一次，即使它循环了很多次。即使在添加单位之后。
这不会检索您需要 getComputedStyle() 的元素的初始字体大小，但已经有一个包含所有这些信息的重复链接