Javascript Dynamic Function Invocation

Question

I want to do something kind of Rubyish in Javascript. I'm writing a wrapper around setting DOM element styles. That would go something like (on a per style basis):

ele.style.backgroundColor = someSetting
ele.style.padding = anotherSetting

What I'd like to do (and I'll use Ruby syntax to illustrate) is:

class Element
 def initialize(ele)
 @ele = ele
 end
 def setDOMElementStyle(styleSettings = {})
 styleSettings.each_pair do |styleAttribute, setting|
 @element.style.send(styleAttribute, setting)
 end
 # Other wrapper stuff for elements here
end
element = Element.new document.createElement("div")
element.setDOMElementStyle :width => '60px', :height => '2px', :top => '0px', :left => '0px'

In Javascript, I can do this with the dreaded eval, but I wondered if there was a neater way to handle it. Here's a hack at it with the evil eval.

var Element, element;
Element = function() {
 function Element(element) {
 this.element = element;
 }
 Element.prototype.setDOMElementStyle = function(styleSettings) {
 var setting, styleAttribute;
 if (styleSettings == null) {
 styleSettings = {};
 }
 for (setting in styleSettings) {
 styleAttribute = styleSettings[setting];
 eval("@element.style." + styleAttribute + " = " + setting);
 }
 }
}
element = new Element(document.createElement("div"));
element.setDOMElementStyle({
 width: '60px',
 height: '2px',
 top: '0px',
 left: '0px'
});

Thanks!

• Dave Newton: I'm not sure why you'd need eval, can you just use jQuery and .css()? Or .style[attr]=val?
• zzzzBov: You already used [] to access styleSettings[setting]...
• Rob W: @DaveNewton Pseudo-code for educative purposes. Using tricks is not the right method to learn a language.
• Dave Newton: @RobW Not sure why you're telling me that.
• Rob W: He's clearly trying to port ruby-ish behavior to JS. The way to learn JS is not "using JQUery" (JQuery == JS, but JS != JQuery).

Answer 1

Use square braces:

element.style[styleAttribute] = setting

In JavaScript, every property can also be referred through square braces. Examples:

window.location.href === window["location"].href === window["location"]["href"]
 === window.location["href"]

• Steve Ross: [embarrassed grin] I remembered that some of the DOM objects were simply hostile to accessing as normal indexable objects. Happily, it turns out I was wrong. Thanks!