title: recursively get CSS from an element and all the childs
body: <p>
  So I would like to be able to do something like this:</p>
  
  <pre><code>getRecursiveCSS(document.getElementById('#menubar'))
  </code></pre>
  
  <p>And I would like it to return a string of CSS, for the main element and all the childs.</p>
  
  
  
  <p>This is what I have tried: (does not work)</p>
  
  <pre><code>function fullPath(el){
    var names = [];
    while (el.parentNode){
      if (el.id){
        names.unshift('#'+el.id);
        break;
      }else{
        if (el==el.ownerDocument.documentElement) names.unshift(el.tagName);
        else{
          for (var c=1,e=el;e.previousElementSibling;e=e.previousElementSibling,c++);
          names.unshift(el.tagName+":nth-child("+c+")");
        }
        el=el.parentNode;
      }
    }
    return names.join(" &gt; ");
  }
  
  function styleRecursive(elements, css) {
      elements = Object.prototype.toString.call(elements) === '[object Array]' ? elements: [elements];
      if (elements.length == 0 || typeof elements[0] == 'undefined')
          return css;
  
      if (typeof elements[0].querySelector == 'undefined')
          return css
  
      if (typeof css == 'undefined')
          css = fullPath(elements[0]) + '{' + getComputedStyle(elements[0]).cssText + '}';
      else
          css += fullPath(elements[0]) + '{' + getComputedStyle(elements[0]).cssText + '}';
  
      _elements = [];
  
      for (var i = 0; i &lt; elements.length; i++) {
          for (var ii = 0; ii &lt; elements[i].childNodes.length; ii++)
              _elements.push(elements[i].childNodes[ii]);
      }
  
      return styleRecursive(_elements, css);
  };
  </code></pre>