有一个疑问elem.style[key] = value;（为什么用.key的方法实现不了效果？）
来源：3-10 编程练习
陆小小
2021-09-29 12:20:42
相关代码：
<!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 m = new Map([
[
p1,
new Map([['color', 'red'], ['backgroundColor', 'yellow'], ['fontSize', '40px']])
],
[
p2,
new Map([['color', 'green'], ['backgroundColor', 'pink'], ['fontSize', '40px']])
],
[
p3,
new Map([['color', 'blue'], ['backgroundColor', 'orange'], ['fontSize', '40px']])
]
]);
console.log(m);
m.forEach((propObj, elem) => {
// console.log(propObj);
// console.log(elem);
propObj.forEach((value, key) => {
// console.log(key);
// console.log(value);
elem.style[key] = value;
})
});
</script>
</body>
</html>
写回答
1回答
-
好帮手慕然然
2021-09-29
同学你好，因为此时的key是一个变量，而不是一个真实存在的style对象的属性，只能使用方括号语法。
如果使用点语法的话：即 ele.style.key = value，此时程序会直接将key当做style的属性来处理，而不是将其当做变量来处理。比如： 给文字设置color属性，可以这样写 ele.style.color = "red"，此时color是style对象的属性。
祝学习愉快！
0
相似问题