|
Style object
Represents style attributes of the DOM element.
To access Style object of the element use its style property: element.style
Note that TIScript supports extended get-by-symbol notation so
el.style["background-color"] = "red"; // is an equivalent of
el.style#background-color = "red"; // extended "symbol" notation
To clear particular CSS attribute value that was set in runtime simply assign undefined value to it:
el.style#background-color = undefined; // clear runtime style attribute - its computed value will be determined by normal CSS cascading process.
Properties |
| [attname] |
string, value of style attribute attname (CSS). attname here is a string or a symbol. Read-write index accessor.
See list of supported names of CSS attributes.
To clear value of style attribute assign undefined value to it:
el.style#background-color = undefined; |
| backgroundImageWidth |
integer | undefined, width in pixels of background image if it is available or undefined if background image is available. |
| backgroundImageHeight |
integer | undefined, height in pixels of background image if it is available or undefined if background image is available. |
| foregroundImageWidth |
integer | undefined, width in pixels of foreground image if it is available or undefined if foreground image is available. |
| foregroundImageHeight |
integer | undefined, height in pixels of foreground image if it is available or undefined if foreground image is available. |
Methods |
| clear |
() returns: Style
Clears all attributes previously set by using [attname] accessor for the element or the set() function.
Returns the style object itself allowing to chain the call with the set() |
| set |
( attributes: Object ) returns: Style
Sets or clears multiple style attributes on the element. As function accepts single object pareameter then it can be used with "object-call" notation:
el.style.set {
display: "block",
width: px(40),
height: px(20)
};
|
| rules |
( ) returns: Array
Returns array of style rules applied to the element. Each element of the array is an object of following types:
- { type: #style-rule, selector: <string>, file: <string>, lineNo: integer; } - for the rule defined in CSS;
- { type: #inline-style, text: <string> } - for styles defined by the style="..." attribute in the DOM;
- { type: #runtime-style } - designates that the element has styles set in runtime through script.
|
| all |
( ) returns: Object
Gathers all style defined style attributes and returns them as an object. |
| constant |
( name: string | symbol ) returns: value | array
Returns value of CSS constant defined in CSS. It could be single value for the case (CSS):
@const SINGLE: #ff007f;
or array for the case like:
@const MULTY: 12px 14px; |
| dimension |
(width: length | int | undefined, height: length | int | undefined [, delayed: false | true] )
The dimension method is an equivalent of setting these two style attributes:
elem.style.width = ... ;
elem.style.height = ... ;
The only difference is when last parameter delayed = true is provided. With it the method changes dimensions of the element immediately and defers remeasurement of children for some later time. It makes sense to use this method if you need to update dimensions of the overflow:auto | scroll element with many children in response of some frequent events like MOUSE_MOVE (E.g. in custom splitter implementation). In this case mutiple MOUSE_MOVEs will end up in only one remeasurement of element's content. |
|
