Question

我有这个小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>

它会更改标识为p的元素的字体大小，但我希望它能更改页面上所有文本的字体大小;甚至没有包含在p标签中的那些。更准确地说，我希望它能像CSS中的*{}那样做。

Answer 1

这样做的一种方法是为整个font-size元素设置<body> CSS属性，并删除该font-size元素的内联<p>。像这样：

<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>

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

1 个答案: