3-10编程练习

来源：3-10 编程练习

卷毛奋斗中

2022-05-30 17:29:13

<!DOCTYPE html>
<html lang="en">

<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', 'yellow'],
//         ['backgroundColor', 'orange'],
//         ['fontSize', '40px']
//     ])]
// ])

// new Map()结构相同，可以封装成一个函数
function fn(a, b, c) {
return new Map([
['color', a],
['backgroundColor', b],
['fontSize', c]
])
}

const m = new Map([
[p1, fn('red', 'yellow', '40px')],
[p2, fn('green', 'pink', '40px')],
[p3, fn('blue', 'orange', '40px')],
]);
m.forEach((propObj, elem) => {
propObj.forEach((value, key) => {
elem.style[key] = value
});
});
</script>
</body>

</html>

写回答

1回答