1

我有这个 ：

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";

谢谢

4

2 回答 2

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 中不存在任何元素，我上面的代码和您的代码一样，将导致错误。

于 2013-07-04T13:47:23.540 回答
1

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

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
);
于 2013-07-04T13:50:48.727 回答