我会在最后发布我研究过的页面。当单击按钮时,我需要 3 个按钮将带有文本段落的div 的字体大小更改为 1.0em、2.0em 和 3.0em。初始正文字体大小为 1.0em。我必须在字体上使用"em"。如果这不是发布此内容的正确格式,我深表歉意。我试图遵循网站的帮助和规则。
这是问题的实际措辞:
(1(在水平线下方添加三个按钮。标记按钮"正常","中"和"大"。
(2( 在"正常"按钮中添加一个"click"事件处理程序,以便在单击该按钮时,"message"div 中的所有文本都更改为 1em 的字体大小。
(3( 在"中"按钮中添加一个"click"事件处理程序,以便在单击该按钮时,"message"div 中的所有文本都更改为 1.5em 的字体大小。图 14 显示了生成的网页的一部分。
(4( 在"大"按钮中添加一个"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 -->
我在 3 个实际按钮下方创建了一个包含 3 个按钮的测试部分,只是为了弄乱我在 stackoverflow.com 上找到的 JavaScript 代码。任何帮助或指导将不胜感激。谢谢。
我已经检查了这些页面,有类似的问题:
更改整个页面内容的文本字体大小
如何通过JavaScript更改字体大小?
单击按钮以更改JavaScript/CSS中
的文本字体大小使用 jquery 在按钮单击事件上增加整个网页的字体大小
仅使用 JavaScript 单击按钮即可增加字体大小
只是省略了大小和em
之间的空格
语法不正确:
document.getElementById("text").style.fontSize = "2.0 em">
正确的语法:
document.getElementById("text").style.fontSize = "2.0em">
您需要将所需的数字放在单词旁边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 -->