Question

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

这是问题的实际措辞：

（1）在水平线下方添加三个按钮。将按钮标记为“普通”，“中”和“大”。

（2）在“普通”按钮上添加一个“单击”事件处理程序，以便单击该按钮时，“消息” div中的所有文本都更改为1em的字体大小。

（3）在“中”按钮上添加一个“单击”事件处理程序，以便单击该按钮时，“消息” div中的所有文本都更改为1.5em的字体大小。图14显示了所得网页的一部分。

（4）在“大”按钮上添加一个“单击”事件处理程序，以便单击该按钮时，“消息” 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 -->

我已经在3个实际按钮下面创建了3个按钮的测试部分，以解决我在stackoverflow.com上找到的javascript代码的问题。任何帮助或指导将不胜感激。谢谢。

我检查了这些页面，发现了类似的问题：

change text-font size of whole page content

How to change FontSize By JavaScript?

click a button to change text font-size of <body> in javascript/css

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

Increase the font size with a click of a button using only JavaScript

Answer 1

只需省略size和LoadApplication(new App())之间的空格

语法错误：

em

正确的语法：

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

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字体大小

2 个答案: