用JS更改元素的字体大小[重复]答案

【问题标题】：Change font size of element with JS [duplicate]用JS更改元素的字体大小[重复]
【发布时间】：2020-06-25 17:15:12
【问题描述】：

我是 JS 新手。我的目标是使 HTML 元素的 font-size 增加为 JS 循环中的函数。
我已经让getElementById 按 ID 查找元素，我的函数循环正常，每次循环时我都有一个变量增加，但元素仍然没有改变。

我的 JavaScript

let i = 0;
var myvar = setInterval(IconWeeder, 1500);
var element = document.getElementById("myDIV");

function bring_er_down() {
  clearInterval(myvar);
  console.log("we stopping")
}

function IconWeeder() {
  element.style.fontSize = i;
  i == i++
    console.log("i is equal to:", i)
  console.log(element)
}

<head>
  <title>Font Size</title>
</head>
<p id="myDIV">I should change size</p>
<input type="button" value="stop" onclick="bring_er_down()"></input>
<script src="icons.js"></script>

谢谢！

【问题讨论】：

标签： javascript html

【解决方案1】：

您需要告知font-size 应该使用的单元类型，例如“px”：element.style.fontSize = i + "px";

另外，i == i++ 并没有按照你的想法做，它正在工作，因为i++ 会增加i，但你不需要比较检查==，你只需要i++;和i += 1;是一样的

请参阅下面的工作示例：

let i = 0;
var myvar = setInterval(IconWeeder, 250);
var element = document.getElementById("myDIV");
element.style.fontSize = i + "px";

function bring_er_down() {
  clearInterval(myvar);
  console.log("we stopping")
}

function IconWeeder() {
  element.style.fontSize = i + "px";
  i++;
  console.clear()
  console.log("i is equal to:", i)
  console.log(element)
}

<p id="myDIV">I should change size</p>
<input type="button" value="stop" onclick="bring_er_down()" />

注意：input是自闭合标签，所以，没有</input>，不存在，你用.../>关闭输入

【讨论】：

【解决方案2】：

代码有几个问题：

输入标签语法错误
i 的值没有以正确的方式递增。

我已经修复了代码，请在下面找到它：

let i = 0;
var myvar = setInterval(IconWeeder, 500);
var element = document.getElementById("myDIV");

function bring_er_down() {
  clearInterval(myvar);
  console.log("we stopping")
}

function IconWeeder() {
  element.style.fontSize = i + 'px';
  i++;
}

<p id="myDIV">I should change size</p>
<input type="button" value="stop" onclick="bring_er_down()" />

【讨论】：