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中没有任何元素，那么上面的代码与您的代码一样会导致错误。

Answer 2

我想你可以编写一个函数，它可以做这样的事情，它允许你传递 ids 的数组来获取你的节点和对象的数组，分别如何为每个节点设置样式。

function stylise(nodeIds, styles) {
    var i = nodeIds.length, j, e;
    while (i--) { // loop over elements
        if (!styles[i]) continue; // no style for this element, skip
        e = document.getElementById(nodeIds[i]); // get by id
        if (!e) continue; // no element, skip
        for (j in styles[i]) if (styles[i].hasOwnProperty(j)) { // loop styles
            e.style[j] = styles[i][j]; // apply style
        }
    }
}

stylise( // then in future to apply CSS just need
    ['el1', 'el2', 'el3'], // element ids
    [{width: '100px'}, {width: '145px'}, {width: '120px'}] // styles
);

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

2 个答案: