Javascript onclick 按钮更改页面字体大小或 div 字体大小

Question

我会 post 我最后研究过的页面。单击按钮时，我需要 3 个按钮来将带有文本段落的 div 的字体大小更改为 1.0em、2.0em 和 3.0em。初始正文字体大小为 1.0em。我必须在字体上使用 "em"。如果这不是 post 中的正确格式，我深表歉意。我尝试遵循站点帮助和规则。

这是问题的实际措辞：

(1) 在横线下方添加三个按钮。将按钮标记为“普通”、“中”和“大”。

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

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

(4) 向“大”按钮添加“点击”事件处理程序，以便在单击该按钮时，“消息”div 中的所有文本都更改为 2.0 号字体em.

这是我的代码：

<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 -->

我在 3 个实际按钮下方创建了一个包含 3 个按钮的测试部分，只是为了弄乱我在 whosebug.com 上找到的 javascript 代码。任何帮助或指导将不胜感激。谢谢。

我检查过这些页面有类似问题：

change text-font size of whole page content

How to change FontSize By JavaScript?

Increase font size of whole web page on button click event using jquery

Answer 1

只需省略大小和 em

之间的 space

语法错误：

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

正确的语法：

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

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 -->

Javascript onclick 按钮更改页面字体大小或 div 字体大小

Javascript onclick button to change page font size or div font size

javascript

size

fonts

onclick

button