Why do some JS apps use object property loops to do?

[jamesbcox1980]

function setStyle(elem, styles) {
    var property;
    for (property in styles) {
        elem.style[property] = styles[property];
    }
}

setStyles(document.getElementById('db_getMessage'), {
    "background" : "#FCC url(/photos/warning.jpg) top left no-repeat",
    "border" : "2px solid #C99",
    "fontFamily" : "Arial, Verdana, \"Trebuchet MS\"",
    "fontSize" : "11pt",
    "color" : "#333",
    "display" : "block"
});

Why couldn't you just do this?

var elem = document.getElementById('db_getMessage');
elem.style.background = "#FCC url(/photos/warning.jpg) top left no-repeat";
elem.style.border = "2px solid #C99";
elem.style.fontFamily = "Arial, Verdana, \"Trebuchet MS\"";
elem.style.fontSize = "11pt";
elem.style.color = "#333";
elem.style.display = "block";

Don't you get the prototype overhead when sending objects to functions like this? I know the second one accomplishes the same thing but does it directly. The first one is more organized and ::LOOKS:: like better code, but what are the benefits to doing it that way? I would think it would charge more processing time.

Can someone give me an example where this would be more useful and efficient besides using it to set css properties as above?

Thanks

[jamesbcox1980]

Title correction: "Why do some JS apps use object property loops to perform tasks?

[TrivDogs]

The real danger with for in loop is probably more that you risk dredging up things that were augmented into the prototype chain but not of interest if you are basically using it as a way to enumerate relevant properties.

In this context, one of the advantages of this would be that if you had to rearrange your CSS structure, you could just do so in some set place and pass it into the function argument... so instead of like this:-

setStyles(document.getElementById('db_getMessage'), {
"background" : "#FCC url(/photos/warning.jpg) top left no-repeat",
"border" : "2px solid #C99",
"fontFamily" : "Arial, Verdana, \"Trebuchet MS\"",
"fontSize" : "11pt",
"color" : "#333",
"display" : "block"
});

WE might declare:-

var styletemplate = {
"background" : "#FCC url(/photos/warning.jpg) top left no-repeat",
"border" : "2px solid #C99",
"fontFamily" : "Arial, Verdana, \"Trebuchet MS\"",
"fontSize" : "11pt",
"color" : "#333",
"display" : "block"
};

Then modify it even before passing it into various functions of interest:-

styletemplate.border = "3px solid #D99"; //change relevant values
setStyles(elem,styletemplate);//call setter

But in this case setting style element properties individually like this can cause performance issues of its own kind. The browser often has to reflow the layout when you set properties so when you set 6 different properties successively, as both examples here do, that can cause 6 reflows.

The suggested method these days is to think about having pre teplated CSS classes or building CSS classes on the fly and assigning them as the class wholesale. Then the browser can take it all in at once, set all the propreties and then reflow once instead of 6 times. It also can eliminate hairness of having javascript sort of just set properties direclty all over the place, which makes you not only know the class which is binded but also worry about the computed value when you're debugging and such. Hope that made sense.

[rnd me]

Why couldn't you just do this?

var elem = document.getElementById('db_getMessage');
elem.style.background = "#FCC url(/photos/warning.jpg) top left no-repeat";
elem.style.border = "2px solid #C99";
elem.style.fontFamily = "Arial, Verdana, \"Trebuchet MS\"";
elem.style.fontSize = "11pt";
elem.style.color = "#333";
elem.style.display = "block";

that may be better for 'db_getMessage', but what if i have 'db_getMessage01' - 'db_getMessage85' ?

performance often takes a backseat to simplicity, convenience, and re-usability.
considering how much faster today's browsers are than those of even a year or two ago, i think it makes sense to put performance on the development backburner.
i second the notion that classes are a more efficient inheritable way to apply groups of styles.