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 对象，或者如果您使用修改 Object 的原型的库（原型，我在看你），这可能会导致问题，那么请随意添加 hasOwnProperty 检查。无论如何，设置不存在的样式值大多是无害的。如果没有 hasOwnProperty 检查，您可以使用继承来组合样式对象。

Answer 2

使用myElement.style.cssText:

var everything = parent.getEveryElementBelowThisOne();
for (i=0; i<everything.length; i++)
    everything[i].style.cssText = "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;"

但请注意，这将覆盖任何已应用的内联样式属性。要附加额外的内联 css，您应该使用：

myElement.style.cssText += '; color:red; ...'; // note the initial ";"

Answer 3

它有点另类，当你谈到父母时，我们假设你会在某个时候考虑它的孩子。但是当您说every element below this one 时，它们可能是相关元素之后的DOM 元素。您的情况可能是其中一种。

我假设您想更改下一个元素兄弟的样式。 使用原始javascript，您可以以通用循环方式遍历，如

nS = parent.nextElementSibling
while(nS){
  nS.style.width = '100%';
  // Change the desired style here
  // You can also further loop on nS's children using `nS.childNodes`,
  // if you want to change their styles too
  nS = nS.nextElementSibling;
}

正如您在原始 javascript 中看到的那样，更改样式的方式非常令人反感。 另一方面，jQuery 提供了良好的 DOM 特性。包括易于遍历，甚至是样式。

就像在 jQuery 中一样。

$(parent).nextAll().each(function(){
      $(this).css({'width': '100%', 'other': 'rules', 'as': 'one-dict'});
      // Change the desired style here
      // You can also further loop nS's children using `$(this).children()`, 
      // if you want to change their styles too
});

希望这会有所帮助。