Javascript onclick 按钮更改页面字体大小或 div 字体大小
[英]Javascript onclick button to change page font size or div font size
问题描述
I'll post the pages I've researched at the end.
我会在最后发布我研究过的页面。 I need 3 buttons to change the font size of the div with paragraphs of text to 1.0em, 2.0em, and 3.0em when the buttons are clicked on.当单击按钮时，我需要 3 个按钮将带有文本段落的 div 的字体大小更改为 1.0em、2.0em 和 3.0em。 The initial body font size is 1.0em.初始正文字体大小为 1.0em。 I do have to use "em" on the font.我必须在字体上使用“em”。 I apologize if this isn't the correct format to post this in. I tried to follow the site help and rules.如果这不是发布此内容的正确格式，我深表歉意。我尝试遵循站点帮助和规则。
This is the actual wording of the questions:这是问题的实际措辞：
(1) Add three buttons below the horizontal rule. (1) 在横线下方添加三个按钮。 Label the buttons “Normal”, “Medium” and “Large”.标记按钮“正常”、“中”和“大”。
(2) Add an 'click' event handler to the “Normal” button so that when the button is clicked all of the text in the “message” div is changed to a font size of 1em. (2) 为“普通”按钮添加一个“点击”事件处理程序，这样当按钮被点击时，“消息”div 中的所有文本都会更改为 1em 的字体大小。
(3) Add an 'click' event handler to the “Medium” button so that when the button is clicked all of the text in the “message” div is changed to a font size of 1.5em. (3) 为“Medium”按钮添加一个“click”事件处理程序，这样当按钮被点击时，“message” div 中的所有文本都会更改为 1.5em 的字体大小。 Figure 14 shows a portion of the resulting web page.图 14 显示了生成的网页的一部分。
(4) Add an 'click' event handler to the “Large” button so that when the button is clicked all of the text in the “message” div is changed to a font size of 2.0em. (4) 为“Large”按钮添加一个“click”事件处理程序，这样当按钮被单击时，“message”div 中的所有文本都会更改为 2.0em 的字体大小。
Here is the code I have:这是我的代码：
<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 -->
I've created a test section of 3 buttons below the 3 actual buttons just to mess around with the javascript codes I found on stackoverflow.com.我在 3 个实际按钮下方创建了一个包含 3 个按钮的测试部分，只是为了弄乱我在 stackoverflow.com 上找到的 javascript 代码。 Any help or guidance would be greatly appreciated.任何帮助或指导将不胜感激。 Thank you.谢谢你。
I've checked these pages with similar issues:我检查了这些页面有类似的问题：
change text-font size of whole page content 更改整个页面内容的文本字体大小
How to change FontSize By JavaScript? 如何通过 JavaScript 更改 FontSize？
click a button to change text font-size of <body> in javascript/css 单击按钮以更改 javascript/css 中 <body> 的文本字体大小
Increase font size of whole web page on button click event using jquery 使用 jquery 在按钮单击事件上增加整个网页的字体大小
Increase the font size with a click of a button using only JavaScript 仅使用 JavaScript 单击按钮即可增加字体大小
2 个解决方案
解决方案1
2 2018-09-21 22:25:27
just omit the space between size and em只需省略 size 和em之间的空格
incorrect syntax:不正确的语法：
document.getElementById("text").style.fontSize = "2.0 em">
correct syntax:正确的语法：
document.getElementById("text").style.fontSize = "2.0em">
解决方案2
0 已采纳 2018-09-21 22:29:36
You need to put the number you want next to the word em .您需要将您想要的数字放在单词em旁边。 Also since you have your onclick method using " doublequotes, you should use single quotes ' in the JavaScript code like this:此外，由于您的onclick方法使用"双引号，因此您应该在 JavaScript 代码中使用单引号' ，如下所示：
onclick="document.getElementById('text').style.fontSize = '1.0em'"
Example:例子：
<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 -->
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.