tweaks style, adds style for docs

Author: futuremarc

lib/addons/p5.dom.js

@@ -895,15 +895,22 @@
   };
 
   /**
-   * Sets the given style (css) property of the element with the given value.
-   * If no value is specified, returns the value of the given property,
-   * or undefined if the property is not.
+   * Sets the given style (css) property (1st arg) of the element with the
+   * given value (2nd arg). If a single argument is given, .style()
+   * returns the value of the given property; however, if the single argument
+   * is given in css syntax ('text-align:center'), .style() sets the css
+   * appropriatly. .style() also handles 2d and 3d css transforms. If
+   * the 1st arg is 'rotate', 'translate', or 'position', the following arguments
+   * accept Numbers as values. ('translate', 10, 100, 50);
    *
    * @method style
    * @param  {String} property   property to be set
-   * @param  {String} [value]    value to assign to property
+   * @param  {String|Number} [value]   value to assign to property
+   * @param  {String|Number} [value]   value to assign to property (rotate/translate)
+   * @param  {String|Number} [value]   value to assign to property (rotate/translate)
+   * @param  {String|Number} [value]   value to assign to property (translate)
    * @return {String|Object/p5.Element} value of property, if no value is specified
-   *                             or p5.Element
+   * or p5.Element
    * @example
    * <div><code class="norender">
    * var myDiv = createDiv("I like pandas.");
@@ -915,7 +922,7 @@
     var self = this;
 
     if (typeof val === 'undefined') {
-      if (!prop.match(/:/)) {
+      if (prop.indexOf(':') === -1) {
         var styles = window.getComputedStyle(self.elt);
         var style = styles.getPropertyValue(prop);
         return style;
@@ -929,7 +936,7 @@
         }
       }
     } else {
-      if (prop.match(/rotate/)) {
+      if (prop === 'rotate'){
         if (arguments.length === 2) {
           var style = this.elt.style.transform.replace(/rotate3d\(.*\)/g, '');
           style = style.replace(/rotate[X-Z]?\(.*\)/g, '');
@@ -948,7 +955,7 @@
           this.elt.style.transform += 'rotateZ(' + arguments[2] + 'deg)';
           this.elt.style.transform += style;
         }
-      } else if (prop.match(/translate/)) {
+      } else if (prop === 'translate') {
         if (arguments.length === 3) {
           var style = this.elt.style.transform.replace(/translate3d\(.*\)/g, '');
           style = style.replace(/translate[X-Z]?\(.*\)/g, '');
@@ -967,7 +974,7 @@
           this.elt.style.transform += style;
           this.elt.parentElement.style.perspective = arguments[3] + 'px';
         }
-      } else if (prop.match(/position/)) {
+      } else if (prop === 'position') {
         this.elt.style.left = arguments[1] + 'px';
         this.elt.style.top = arguments[2] + 'px';
         this.x = arguments[1];
@@ -976,7 +983,7 @@
         this.elt.style[prop] = val;
         if (prop === 'width' || prop === 'height' || prop === 'left' || prop === 'top') {
           var numVal = val.replace(/\D+/g, '');
-          this[prop] = parseInt(numVal);
+          this[prop] = parseInt(numVal, 10); 
         }
       }
     }