javascript - 更改整个页面内容的文本字体大小

标签 javascript html css

在 javascript/css 中有没有一种方法可以通过一次单击更改所有标签、标题、段落等的文本大小,而无需显式获取元素的 ID,然后更改其字体大小。

我现在正在做的是通过 javascript 获取元素的 ID 并显式更改其字体大小。要清楚地了解我在做什么,请查看此 link或检查以下代码

<script type="text/javascript">
function changemysize(myvalue) {
    var div = document.getElementById("mymain");
    div.style.fontSize = myvalue + "px";   
}
</script>

HTML代码

Choose a text size:
<font size="2"><a href="javascript:void(0);" onclick="changemysize(16);">A</a></font>
<font size="4"><a href="javascript:void(0);" onclick="changemysize(20);">A</a></font>
<font size="5"><a href="javascript:void(0);" onclick="changemysize(25);">A</a></font>
<div id="mymain">
Only this text gets affected
</div>

最佳答案

您可以使用 rem ,优于 em在某些地方因为em级联和rem没有。

所有长度都在 rem 中指定,您可以通过更改 <html> 的字体大小来调整大小元素。

另请参阅:http://snook.ca/archives/html_and_css/font-size-with-rem

关于javascript - 更改整个页面内容的文本字体大小,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16460990/

相关文章:

javascript - 仅当我更改类 Prop 时如何安装组件

javascript - Vue 键的类型转换 v-for

html - 如何修复表格溢出以使其自动滚动?

html - 如何使用 Bootstrap 验证器在 Bootstrap v4 上进行验证?

CSS 文件未在 Django 中加载

html - 表单元素和链接具有相同高度的最小 CSS

javascript - 用于修改 Document.Styles 或 Document.ListTemplates 集合的 Word JavaScript API

javascript - 了解 Bootstrap 网格系统中准确的关键断点

html - 负 margin 打破 float

javascript - 在 Chrome 中从动态表单发布到动态 iframe 会打开一个新窗口