代码之家 › 专栏 › 技术社区 › Mala

javascript:将大的css字符串一次性插入到每个dom元素中

walkthrough dom css javascript

0

Mala · 技术社区 · 14 年前

这是一个由两部分组成的问题-首先,我需要获取父元素的每个子元素(或子类等),然后我需要重置它的样式。因此,我想做如下的事情:

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

3 回复 | 直到 14 年前

1

2

slebetman 14 年前

我将使用一个可读性和可维护性更强的对象,而不是字符串:

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 对象的任何其他方式,或者如果您使用一个库(原型,我在看您),修改对象的原型,这可能会导致问题,然后可以随意添加hasownproperty检查。无论如何,设置不存在的样式值基本上是无害的。如果不进行hasownProperty检查,则可以使用继承来组合样式对象。

2

1

manixrock 14 年前

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

3

0

simplyharsh 14 年前

这有点离谱,当你谈到父母的时候,我们假设你会在某个时候考虑到他们的孩子。但当你说, 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
});

希望这有帮助。