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

标签 javascript button fonts onclick size

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

这是问题的实际措辞:

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

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

(3) 向“Medium”按钮添加“click”事件处理程序,以便在单击该按钮时,“message”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

最佳答案

只需省略 size 和 em 之间的空格即可

语法错误:

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

正确的语法:

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

关于Javascript onclick按钮更改页面字体大小或div字体大小,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52451644/

相关文章:

javascript - Raphaeljs : Why is paper. getFont() 未定义? Cufon.replace() 有效

javascript - 如何在异步回发后保持整个页面滚动位置

javascript - 移动友好的 CSS - 如何隐藏侧边栏?

javascript - 播放下一个/上一个按钮问题?

android - 防止按钮在 Android 上隐藏软键盘

css - 字体被IE/ME截断

java - 替代默认的 JTextPane 字体呈现

javascript - Try 语句永远不会在不抛出错误的情况下通过

javascript - jQuery 日期选择器和自动完成功能结合在一起

CSS DIV - 单击 Facebook 'Send button' 展开 div 并添加不需要的滚动条