JavaScript点击按钮更改页面字体大小或div字体大小

Question

我将在最后发布我研究过的页面。当单击按钮时，我需要3个按钮来更改带有文本段落的div的字体大小为1.0em、2.0em和3.0em。初始正文字体大小为1.0em。我必须在字体上使用“em”。如果这不是发布此内容的正确格式，我很抱歉。我尝试遵循网站的帮助和规则。

以下是问题的实际措辞：

(1) 在水平线下方添加三个按钮。标记按钮为“Normal”、“Medium”和“Large”。

(2) 为“Normal”按钮添加一个“click”事件处理程序，以便单击按钮时，“message” div中的所有文本都会更改为1em的字体大小。

(3) 为“Medium”按钮添加一个“click”事件处理程序，以便单击按钮时，“message” div中的所有文本都会更改为1.5em的字体大小。图14显示了结果网页的一部分。

(4) 为“Large”按钮添加一个“click”事件处理程序，以便单击按钮时，“message” div中的所有文本都会更改为2.0em的字体大小。

以下是我的代码：

<div id="text" style="font-size: 1em">
<p>paragraph 1</p>
<p>paragraph 2</p>
<p>paragraph 3</p>
</div>
<hr>
<input type="button" value="Normal"
onclick="document.body.style.fontsize='1.0 em'">
<input type="button" value="Medium"
onclick="document.body.style.fontsize='1.5 em'">
<input type="button" value="Large"
onclick="document.body.style.fontsize='2.0 em'">
<!--  TEST BUTTON BEGIN -->
<br>
<input type="button" value="Test1"
onclick="document.getElementById("text").style.fontSize = "1.0 em">
<input type="button" value="Test15"
onclick="document.getElementById("text").style.fontSize = "1.5 em">
<input type="button" value="Test20"
onclick="document.getElementById("text").style.fontSize = "2.0 em">
<!-- TEST BUTTON END -->

我在三个实际按钮下面创建了一个测试按钮组，只是为了研究我在stackoverflow.com上找到的javascript代码。任何帮助和指导都将不胜感激。谢谢。

我已经检查了这些类似问题的页面：

更改整个页面内容的文本字体大小

如何通过JavaScript更改字体大小？

点击按钮以在javascript/css中更改元素的文本字体大小

使用jquery在按钮单击事件上增加整个网页的字体大小

仅使用JavaScript单击按钮即可增加字体大小

- Zed Z

Answer 1

只需删除尺寸和em之间的空格。

不正确的语法：

document.getElementById("text").style.fontSize = "2.0 em">

正确的语法：

document.getElementById("text").style.fontSize = "2.0em">

- Ali Sheikhpour

Answer 2

你需要在单词em旁边放上你想要的数字。另外，由于你的onclick方法使用了双引号"，所以在JavaScript代码中应该使用单引号'，像这样：

onclick="document.getElementById('text').style.fontSize = '1.0em'"

例如：

<div id="text" style="font-size: 1em">
  <p>paragraph 1</p>
  <p>paragraph 2</p>
  <p>paragraph 3</p>
</div>
<hr>
<input type="button" value="Normal" onclick="document.getElementById('text').style.fontSize = '1.0em'">
<input type="button" value="Medium" onclick="document.getElementById('text').style.fontSize = '1.5em'">
<input type="button" value="Large" onclick="document.getElementById('text').style.fontSize = '2.0em'">
<!-- TEST BUTTON END -->

- Pietro Nadalini

---

哦，非常感谢！这太完美了。我觉得我离成功很近，但就是想不出来。再次感谢你！ - Zed Z