What's new? | Help | Directory | Sign in
Google
             
Search
for
Updated Nov 15, 2008 by pilgrim
Labels: is-article, about-dom
ArticleSetProperties  
HOWTO set multiple properties on an element (goog.dom.setProperties)

TODO intro

The code

/**
 * Map of attributes that should be set using
 * element.setAttribute(key, val) instead of element[key] = val.  Used
 * by goog.dom.setProperties
 *
 * @type Object
 * @private
 */
goog.dom.DIRECT_ATTRIBUTE_MAP_ = {
  cellpadding: 'cellPadding',
  cellspacing: 'cellSpacing',
  colspan: 'colSpan',
  rowspan: 'rowSpan',
  valign: 'vAlign',
  height: 'height',
  width: 'width',
  frameborder: 'frameBorder'
};

/**
 * Sets a number of properties on a node
 * @param {Element} element DOM node to set properties on
 * @param {Object} properties Hash of property:value pairs
 */
goog.dom.setProperties = function(element, properties) {
  goog.object.forEach(properties, function(val, key) {
    if (key == 'style') {
      element.style.cssText = val;
    } else if (key == 'class') {
      element.className = val;
    } else if (key == 'for') {
      element.htmlFor = val;
    } else if (key in goog.dom.DIRECT_ATTRIBUTE_MAP_) {
      element.setAttribute(goog.dom.DIRECT_ATTRIBUTE_MAP_[key], val);
    } else {
      element[key] = val;
    }
  });
};

The code walkthrough

TODO walkthrough

Further reading

TODO further reading


Comment by sorokin88, May 19, 2008

I use this function:

setAttr=function(obj,attr)
{
	for (var i in attr) obj[i]=attr[i];
}

// Example:
var a=document.getElementById('test');
var w=50;
var h=40;
setAttr(a.style,{left:20,top:30,width:w,height:h});

Sign in to add a comment