JS闭包实例--改变页面字体大小

最新推荐文章于 2023-05-17 20:25:43 发布

wll_er

最新推荐文章于 2023-05-17 20:25:43 发布

阅读量1k

点赞数 1

分类专栏： JS 文章标签： javascript html

本文链接：https://blog.csdn.net/wll_er/article/details/107267967

版权

JS 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

在页面上添加一些可以调整字号的按钮。这里采取的方法是：
以像素为单位指定body元素的font-size，然后通过相对的em单位设置页面中其它元素（例如p）的字号。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>这是一个设置字体大小的页面</title>
</head>
<body>
<script>
        makeSize = (size) => {
            //根绝传过来的参数设置字体大小
            return () => {
                document.body.style.fontSize = size + 'px';
            }
        }

        var size12 = makeSize(12);
    var size16 = makeSize(16);
    var size20 = makeSize(20);

    document.getElementById('size-12').onclick = size12

    document.getElementById('size-16').onclick = size16;
    document.getElementById('size-20').onclick = size20;
</script>
<a href="#" id="size-12">12</a>
<a href="#" id="size-16">16</a>
<a href="#" id="size-20">20</a>
<p>芳晨丽日桃花浦</p>
<p>珠帘翠帐凤凰楼</p>

</body>
</html>

报错：Uncaught TypeError: Cannot set property ‘onclick’ of null
解决办法:

(1)用window.οnlοad=()=>{} 把js代码包裹起来

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>这是一个设置字体大小的页面</title>
</head>
<body>
<script>
        window.onload=()=>{
            makeSize = (size) => {
            //根绝传过来的参数设置字体大小
            return () => {
                document.body.style.fontSize = size + 'px';
            }
        }

        var size12 = makeSize(12);
    var size16 = makeSize(16);
    var size20 = makeSize(20);

    document.getElementById('size-12').onclick = size12

    document.getElementById('size-16').onclick = size16;
    document.getElementById('size-20').onclick = size20;
        }
</script>
<a href="#" id="size-12">12</a>
<a href="#" id="size-16">16</a>
<a href="#" id="size-20">20</a>
<p>芳晨丽日桃花浦</p>
<p>珠帘翠帐凤凰楼</p>

</body>
</html>

（2）把JS部分放在底部加载

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>这是一个设置字体大小的页面</title>
</head>
<body>

<a href="#" id="size-12">12</a>
<a href="#" id="size-16">16</a>
<a href="#" id="size-20">20</a>
<p>芳晨丽日桃花浦</p>
<p>珠帘翠帐凤凰楼</p>
<script>
    makeSize = (size) => {
        //根绝传过来的参数设置字体大小
        return () => {
            document.body.style.fontSize = size + 'px';
        }
    }

    var size12 = makeSize(12);
    var size16 = makeSize(16);
    var size20 = makeSize(20);

    document.getElementById('size-12').onclick = size12

    document.getElementById('size-16').onclick = size16;
    document.getElementById('size-20').onclick = size20;
</script>
</body>
</html>

wll_er

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
JS闭包实例--改变页面字体大小

在页面上添加一些可以调整字号的按钮。这里采取的方法是：以像素为单位指定body元素的font-size，然后通过相对的em单位设置页面中其它元素（例如p）的字号。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>这是一个设置字体大小的页面</title></head><body><script
复制链接

扫一扫

专栏目录