使用JavaScript设置整个页面的字体大小

Set font size for an entire page using JavaScript

本文关键字：字体 JavaScript 设置 使用      更新时间：2023-09-26

我有一个小HTML页面：

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Untitled Document</title>
    </head>
    <script>
        function myf () {
            var z = document.getElementById('no').value;
            var x = document.getElementById('p');
            l = parseInt(z);
            if ((l > 40) || (l < 10)) {
                alert('please enter a value between 10 to 40');
            }
            x.style.fontSize = l + "px";
        }
    </script>
    <body>
        <input type="button" onClick="myf();" value="resize"/>
        <input type="text" id="no"/>
        <p id="p" style="font-size:24px;">text here</p>
    </body>
</html>

它会更改id为p的元素的字体大小，但我希望它更改页面上所有文本的字体大小；即使是未包含在CCD_ 2标签中的那些。更确切地说，我希望它能做一些类似*{}在CSS中所做的事情。

一种方法是为整个<body>元素设置font-size CSS属性，并删除该<p>元素的内联font-size。类似这样的东西： 
<html>
    <head>
        <meta charset="utf-8">
        <title>Untitled Document</title>
    </head>
    <script>
        function myf () {
            var z = document.getElementById('no').value;
            l = parseInt(z);
            if ((l > 40) || (l < 10)) {
                alert('please enter a value between 10 to 40');
            }
            document.body.style.fontSize = l + "px";
        }
    </script>
    <body>
        <input type="button" onClick="myf();" value="resize"/>
        <input type="text" id="no"/>
        <p id="p">text here</p>
        <span>another text here</span>
    </body>
</html>
相关文章：