javascript: insérer une chaîne CSS volumineuse en une fois, dans chaque élément DOM

Question

Ceci est une question en deux parties - d'abord je dois obtenir chaque élément qui est un enfant (ou sous-enfant, etc) d'un élément parent, puis j'ai besoin pour réinitialiser son style. En tant que tel, je cherche à faire quelque chose comme ce qui suit:

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

Donc mes questions sont les suivantes:

• Y at-il une fonction javascript qui marcheront efficacement à travers le DOM en dessous d'un élément donné ?
• Y at-il une fonction javascript qui me permettra de définir une chaîne CSS comme ça? Ou dois-je avoir un tas d'entrées comme:

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

jQuery est pas une option.

Answer 1

Au lieu d'une chaîne, j'utiliser un objet, beaucoup plus lisible et maintenable:

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

Ensuite, utilisez une fonction d'aide, quelque chose comme:

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

et dans votre boucle:

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

---

Une note à propos de la fonction setStyle (avant que les gens ne me déprécient pour cela comme la dernière fois), je n'ai pas utilisé hasOwnProperty pour vérifier les éléments de style car dans ce cas, et dans la plupart des cas, nous utilisons un objet non hérité . Si vous construisez votre objet new_css de toute autre manière ou si vous utilisez une bibliothèque (prototype, je vous regarde) qui modifie le prototype de l'objet, ce qui peut causer des problèmes, n'hésitez pas à ajouter la vérification hasOwnProperty. Quoi qu'il en soit, la définition de valeurs de style inexistantes est généralement inoffensive. Et sans vérification hasOwnProperty, vous pouvez utiliser l'héritage pour composer des objets de style.

Answer 2

Il est légèrement décalé, comme lorsque vous parlez de parent, nous supposons que vous envisageriez ses enfants à un moment donné. Mais quand vous dites, every element below this one alors ils peuvent être des éléments DOM après l'élément concerné. Le vôtre peut être l'un ou l'autre.

Je suppose que vous voulez changer le style des frères et soeurs de l'élément suivant. utilisation de javascript brut, vous pouvez traverser d'une manière générique en boucle, comme

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

Comme vous pouvez le voir avec le javascript brut, la façon de changer de style est tout à fait répulsive. D'autre part, jQuery donne une bonne fonctionnalité DOM .. y compris le déplacement facile, même le style.

Comme, la même chose dans jQuery serait.

$(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 
}); 

Espérons que cela aide.

Answer 3

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

Mais notez que ceci surpassera tous les styles en ligne attributs déjà appliqué. Pour ajouter des css en ligne supplémentaires, vous devez utiliser:

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