Question

I want to create a loop so I can walk thru all the CSS properties that are defined in an element. My goal is to create a function that merge the style of two elements.

<span id="a1" style="font-family:verdana;">Hello</span>
<span id="a2" style="font-size:15;">World</span>​

And the JS function would look something like this:

function mergeStyle (obj,target){
    $.each(test.style.CSSStyleDeclaration,function(){ // This will not work?
       // Add to target
    })
    return;
};

​

Answer 1

I recommend using classes instead, since your need doesn’t sound as a good design. If you still want it though, this should work:

$.fn.mergeCSS = function(other) {
  var $this  = $(this),
      $other = $(other),
      style  = $other.get(0).style;

  $.each(style, function(i, name) {
    $this.css(name, style[name]);
  });

  return this;
};

The .style property of an element contains its styles; CSSStyleDeclaration is .style‘s constructor which is not element-specific.

Usage:

$("<p style='color:green'>").mergeCSS("<p style='background-color:red'>");
// <p style='color: green; background-color: red; '>

It alters and returns the first element.