Javascript - 将相同的属性应用于多个变量

Question

我有这个:

var el1 = document.getElementById("el1");
var el2 = document.getElementById("el2");
var el3 = document.getElementById("el3");

el1.style.width = "100px";
el2.style.width = "100px";
el3.style.width = "100px";

有什么方法可以使这段代码更短、更易于维护吗？

如果我需要:

el1.style.width = "100px";
el2.style.width = "145px";
el3.style.width = "120px";

谢谢

Answer 1

好吧，你可以通过编写一个循环来完成:

var data = {
    el1: '100px',
    el2: '100px',
    el3: '100px'
};

for (var el in data) {
    document.getElementById(el).style.width = data[el];
}

但是，实际上，这种对多个 DOM 元素的操作正是编写 jQuery 之类的任务库的目的。 “你试过 jQuery 了吗？”在这个网站上有点笑话，但这是一个非常合适的场合。在这种情况下，例如，使用 jQuery:

$('#el1, #el2, #el3').width(100);

请注意，这也可以防止元素不存在的情况。如果运行代码时 DOM 中不存在任何元素，我上面的代码和您的代码一样会导致错误。