老师检查一下代码

来源:3-11 项目作业

慕函数0445997

2022-12-06 14:23:33

题目让用一个函数封装,是这样子封装吗?之前写了一个没封装的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p>p1</p>
    <p>p2</p>
    <p>p3</p>
    <script>
        //使用Map来操作dom
        const [p1,p2,p3]=document.querySelectorAll('p');
        function createMap(val1,val2,val3,elem){
            const m=new Map([
                [elem,new Map([
                    ['color',val1],
                    ['backgroundColor',val2],
                    ['fontSize',val3]
                ])]
            ]);

            m.forEach((map,elem)=>{
                map.forEach((value,key)=>{
                    elem.style[key]=value;
                })
            })
            return m;
        }
       
        //m.set(p1,'red').set(p2,'yellow').set(p3,'green');
        createMap('red','blue','30px',p1)
       
        createMap('blue','red','30px',p2)

        createMap('green','orange','30px',p3)
    </script>
</body>
</html>


写回答

1回答

好帮手慕小李

2022-12-06

同学你好,封装的思路是可以的,封装主要是思想就是代码复用。让代码看起来简洁明了易用。上述代码具备封装的思想。

祝学习愉快!

0

前端工程师

前端入门如同写字,如果你不知道从哪开始,那就选择前端(含Vue3.x,React17,TS)

20327 学习 · 17877 问题

查看课程