javascript - 如何避免在 JS 中重复调用 "document.getElementById"？

Question

这是一个例子:

document.getElementById("field_a").style.color = "red";
document.getElementById("field_b").style.color = "red";
document.getElementById("field_c").style.color = "red";
document.getElementById("field_d").style.color = "red";
document.getElementById("field_a").style.backgroundColor = "white";
document.getElementById("field_b").style.backgroundColor = "white";
document.getElementById("field_c").style.backgroundColor = "white";
document.getElementById("field_d").style.backgroundColor = "white";

是否可以用更少的代码行来实现同样的效果？谢谢。

Answer 1

假设您要为所有内容分配相同的颜色，为什么不遍历字段名称列表？

fields = ['field_a', 'field_b', ...]
fields.forEach(field => {
    const fieldEl = document.getElementById(field);
    fieldEl.style.color = "red";
    fieldEl.style.backgroundColor = "white";
});

Array.prototype.forEach()