Javascript onclick 按钮更改页面字体大小或 div 字体大小
[英]Javascript onclick button to change page font size or div font size
问题描述
我会在最后发布我研究过的页面。 当单击按钮时，我需要 3 个按钮将带有文本段落的 div 的字体大小更改为 1.0em、2.0em 和 3.0em。 初始正文字体大小为 1.0em。 我必须在字体上使用“em”。 如果这不是发布此内容的正确格式，我深表歉意。我尝试遵循站点帮助和规则。
这是问题的实际措辞：
(1) 在横线下方添加三个按钮。 标记按钮“正常”、“中”和“大”。
(2) 为“普通”按钮添加一个“点击”事件处理程序，这样当按钮被点击时，“消息”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 -->
我在 3 个实际按钮下方创建了一个包含 3 个按钮的测试部分，只是为了弄乱我在 stackoverflow.com 上找到的 javascript 代码。 任何帮助或指导将不胜感激。 谢谢你。
我检查了这些页面有类似的问题：
2 个解决方案
解决方案1
2 2018-09-21 22:25:27
只需省略 size 和em之间的空格
不正确的语法：
document.getElementById("text").style.fontSize = "2.0 em">
正确的语法：
document.getElementById("text").style.fontSize = "2.0em">
解决方案2
0 已采纳 2018-09-21 22:29:36
您需要将您想要的数字放在单词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 -->
字体大小更改 onclick 超过 div
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.