Docs/Element/Element.Style.md

   1 Type: Element {#Element}
   2 ========================
   3
   4 Custom Type to allow all of its methods to be used with any DOM element via the dollar function [$][].
   5
   6
   7
   8 Element Method: setStyle {#Element:setStyle}
   9 --------------------------------------------
  10
  11 Sets a CSS property to the Element.
  12
  13 ### Syntax:
  14
  15         myElement.setStyle(property, value);
  16
  17 ### Arguments:
  18
  19 1. property - (*string*) The property to set.
  20 2. value    - (*mixed*) The value to which to set it. Numeric values of properties requiring a unit will automatically be appended with 'px'.
  21
  22 ### Returns:
  23
  24 * (*element*) This element.
  25
  26 ### Example:
  27         //Both lines have the same effect.
  28         $('myElement').setStyle('width', '300px'); // the width is now 300px.
  29         $('myElement').setStyle('width', 300); // the width is now 300px.
  30
  31 ### Notes:
  32
  33 - All number values will automatically be rounded to the nearest whole number.
  34
  35
  36
  37 Element Method: getStyle {#Element:getStyle}
  38 --------------------------------------------
  39
  40 Returns the style of the Element given the property passed in.
  41
  42 ### Syntax:
  43
  44         var style = myElement.getStyle(property);
  45
  46 ### Arguments:
  47
  48 1. property - (*string*) The css style property you want to retrieve.
  49
  50 ### Returns:
  51
  52 * (*string*) The style value.
  53
  54 ### Examples:
  55
  56         $('myElement').getStyle('width'); // returns "300px".
  57         $('myElement').getStyle('width').toInt(); // returns 300.
  58
  59
  60
  61 Element Method: setStyles {#Element:setStyles}
  62 ----------------------------------------------
  63
  64 Applies a collection of styles to the Element.
  65
  66 ### Syntax:
  67
  68         myElement.setStyles(styles);
  69
  70 ### Arguments:
  71
  72 1. styles - (*object*) An object of property/value pairs for all the styles to apply.
  73
  74 ### Returns:
  75
  76 * (*element*) This element.
  77
  78 ### Example:
  79
  80         $('myElement').setStyles({
  81                 border: '1px solid #000',
  82                 width: 300,
  83                 height: 400
  84         });
  85
  86 ### See Also:
  87
  88 - [Element:getStyle][]
  89
  90
  91
  92 Element Method: getStyles {#Element:getStyles}
  93 ----------------------------------------------
  94
  95 Returns an object of styles of the Element for each argument passed in.
  96
  97 ### Syntax:
  98
  99         var styles = myElement.getStyles(property[, property2[, property3[, ...]]]);
 100
 101 ### Arguments:
 102
 103 1. properties - (*strings*) Any number of style properties.
 104
 105 ### Returns:
 106
 107 * (*object*) An key/value object with the CSS styles as computed by the browser.
 108
 109 ### Examples:
 110
 111         $('myElement').getStyles('width', 'height', 'padding');
 112         // returns {width: '10px', height: '10px', padding: '10px 0px 10px 0px'}
 113
 114 ### See Also:
 115
 116 - [Element:getStyle][]
 117
 118
 119
 120 [$]: /core/Element/Element/#Window:dollar
 121 [Element:getStyle]: #Element:getStyle