12-5、Map的应用

53 阅读1分钟
<body>
    <p>1</p>
    <p>2</p>
    <p>3</p>
</body>
<script>
    const [p1, p2, p3] = document.querySelectorAll('p');
    // console.log(p1, p2, p3);
    // const m = new Map();
    // m.set(p1, 'red');
    // m.set(p1, 'green');
    // m.set(p1, 'blue');

    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]
        }
    })

    // m.forEach((color, elem) => {
    //     elem.style.color = color
    // })
    console.log(m);
</script>