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.