老师检查作业

来源:3-10 编程练习

3颗猫饼干

2021-12-10 15:50:07

相关代码:

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <p>1</p>
    <p>2</p>
    <p>3</p>
    <script>
        const [p1, p2, p3] = document.querySelectorAll('p')
        /*
const m = new Map([
        [
          p1,
          {
            color: 'red',
            backgroundColor: 'yellow',
            fontSize: '40px'
          }
        ],
        [
          p2,
          {
            color: 'green',
            backgroundColor: 'pink',
            fontSize: '40px'
          }
        ],
        [
          p3,
          {
            color: 'blue',
            backgroundColor: 'orange',
            fontSize: '40px'
          }
        ]
      ]);

      m.forEach((propObj, elem) => {
        for (const p in propObj) {
          elem.style[p] = propObj[p];
        }
      });
 */
        
        const map1 = new Map([
            ['color', 'red'],
            ['backgroundColor', 'yellow'],
            ['fontSize', '40px'],
        ]);
        const map2 = new Map([
            ['color', 'green'],
            ['backgroundColor', 'pink'],
            ['fontSize', '40px'],
        ]);
        const map3 = new Map([
            ['color', 'blue'],
            ['backgroundColor', 'orange'],
            ['fontSize', '40px'],
        ]);


        const map = new Map([
            [p1, map1],
            [p2, map2],
            [p3, map3]
        ]);
        // console.log(m);

        map.forEach(
            (propMap,elem) => {
                // console.log(propMap);
                // console.log(elem);
                propMap.forEach(
                    (v,k) => {
                        // console.log(v);
                        // console.log(k);
                        elem.style[k] = v ;
                        
                    }
                )

            }
        )
    </script>
</body>

</html>


写回答

1回答

好帮手慕星星

2021-12-10

同学你好,代码实现效果很棒。继续加油,祝学习愉快!

0

前端工程师

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

20327 学习 · 17877 问题

查看课程