0

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

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 不是一个选项。

4

3 回答 3

2

而不是字符串，我会使用一个对象，它更具可读性和可维护性：

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 检查，您可以使用继承来组合样式对象。

于 2010-08-10T06:21:15.800 回答
1

使用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 ";"
于 2010-08-10T10:01:07.210 回答
0

它有点另类，当你谈到父母时，我们假设你会在某个时候考虑它的孩子。但是当您说时，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
});

希望这可以帮助。

于 2010-08-10T06:33:53.300 回答