javascript:一次性将大型 CSS 字符串插入到每个 DOM 元素中

Question

这是一个由两部分组成的问题 - 首先我需要获取作为父元素的子元素(或子子元素等)的每个元素，然后我需要重置它的样式。因此，我希望执行以下操作:

var everything = parent.getEveryElementBelowThisOne();
for (i=0; i<everything.length; i++)
    everything[i].css = "font: 100%/100% Verdana,Arial,Helvetica,sans-serif; color: rgb(0, 0, o); margin: 0px; padding: 0px; border-collapse: collapse; border-width: 0px; border-spacing: 0px; text-align: left; outline: 0pt none; text-transform: none; vertical-align: middle; background-color: transparent; table-layout: auto; min-width: 0px; min-height: 0px;"

所以我的问题如下:

• 是否有一个 javascript 函数可以有效地遍历给定元素下方的 DOM？
• 是否有一个 javascript 函数可以让我设置这样的 CSS 字符串？或者我是否必须有一大堆条目，例如:

everything[i].style.font = ...;
everything[i].style.color = ...;
[...]
everything[i].style.min-height: ...;

jQuery 不是一个选项。

Answer 1

我会使用一个对象来代替字符串，它更具可读性和可维护性:

var new_css = {
    font: '100%/100% Verdana,Arial,Helvetica,sans-serif',
    color: 'rgb(0, 0, o)',
    margin: '0px',
    padding: '0px',
    borderCollapse: 'collapse'
    /* rest here ... */
}

然后使用辅助函数，例如:

function setStyle (element, style) {
    for (var n in style) {
        element[n] = style[n];
    }
}

并进入你的 for 循环:

for (i=0; i<everything.length; i++) setStyle(everything[i],new_css);

---

关于 setStyle 函数的说明(在人们像上次那样对我投反对票之前)，我故意没有使用 hasOwnProperty 来检查 style 的元素，因为在在这种情况下，在大多数情况下，我们使用的对象不是从任何东西继承的。如果您以任何其他方式构造您的 new_css 对象，或者如果您使用修改对象原型(prototype)的库(原型(prototype)，我正在看着你)，这可能会导致问题，那么请随意添加 hasOwnProperty 检查。无论如何，设置不存在的样式值大多是无害的。如果没有 hasOwnProperty 检查，您可以使用继承来组合样式对象。