老师，为什么这里的访问是style[k]而不是style.[k]； style.[k]为啥不行

<!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>1111</p>
    <p>2222</p>
    <p>3333</p>

    <script>
        const [p1, p2, p3] = document.querySelectorAll('p');
        const m = new Map([
            [p1, {
                color: 'red',
                backgroundColor: '#bfa'
            }],
            [p2, {
                color: 'orange',
                backgroundColor: 'green'
            }],
            [p3, {
                color: 'blue',
                backgroundColor: 'tomato'
            }]
        ]);
        console.log(m);

        m.forEach((obj, element) => {
            console.log(obj, element);
            for (const k in obj) {
                element.style[k] = obj[k];
            }
        });
    </script>
</body>

</html>

张小阳_ 2022-10-16

源自：Set 和 Map 数据结构 3-9 Map的应用

收起

2回答

imooc_慕慕 2022-10-17 10:04:14

同学你好，楼下同学说的是对的，祝学习愉快~

收起回答

提问者张小阳_ #1

不太理解，是因为遍历对象的缘故吗

2022-10-18 22:19:04
imooc_慕慕回复提问者张小阳_ #2

同学你好，可以这样理解，分析如下：
有两种方式来设置获取属性值即点方式和[]方式，当属性名为变量的时候，只能用[]方式，举例如下：
点方式会将变量作为属性名，而不是变量的值作为属性名，此时在本题效果中点的方式是不合适的，需要用[]方式。

element.style[k]是给元素设置style样式即添加属性，obj[k]是获取到的属性值，赋值后就是设置上了style样式。
因为k是变量，我们想要k的值作为属性名，而不是k本身，因此这种情况下只能用[]方式。
可以复习一下之前学习的课程，参考地址：
https://class.imooc.com/lesson/2124#mid=50515
祝学习愉快~

2022-10-19 10:09:08