title: Change width/height depending on class with data-attribute
body: <p>I have the following JS code that changes the <code>width</code> depending on value of the <code>data-percentage</code> HTML attribute:</p>
  
  <pre><code>var addRule = (function (sheet) {
    if(!sheet) return;
    return function (selector, styles) {
      if (sheet.insertRule) return sheet.insertRule(selector + " {" + styles + "}", sheet.cssRules.length);
      if (sheet.addRule) return sheet.addRule(selector, styles);
    }
  }(document.styleSheets[document.styleSheets.length - 1]));
  
  var i = 101;
  while (i--) {
    addRule("[data-percentage='" + i + "%']", "width:" + i + "%");
  }
  </code></pre>
  
  <p>See the demo: <a href="http://jsfiddle.net/YYF35/" rel="nofollow">http://jsfiddle.net/YYF35/</a></p>
  
  <p>Instead of <code>width</code>, for some elements I want to change their <code>height</code>.</p>
  
  <p>How can I change the code so that depending on class of the <code>div</code> I change the height or width of element (depending on the <code>data-percentage</code> attribute number of course)?</p>
  
  <p>I don’t want to create a different HTML attribute for it, like so:</p>
  
  <pre><code>while (i--) {
    addRule("[data-percentage-width='" + i + "%']", "width:" + i + "%");
    addRule("[data-percentage-height='" + i + "%']", "height:" + i + "%");
  }
  </code></pre>
  
  <p>jQuery can be used as well. Any ideas?</p>