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;

backgroundImage

Image | null, background image if it is defined in CSS.

foregroundImage

Image | null, foreground image if it is defined in CSS or behaviors. For the <video> element, it will return image representing current frame. 

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 unavailable.

foregroundImageWidth

integer | undefined, width in pixels of foreground image if it is available or undefined if foreground image is unavailable.

foregroundImageHeight

integer | undefined, height in pixels of foreground image if it is available or undefined if foreground image is unavailable.

isDormant

true | false, true if used style of the element has display:none or visibility:none defined - element is excluded from layout and rendering completely.

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)
};

cursor

( img: Image | null [, hotspotX:integer, hotspotY:integer ]  ) returns: Style

Creates and sets cursor from img and hotspotX/Y coordinates. To reset cursor to its default value use el.style.cursor(null);  

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.

documentRules

([callback: function] [, filter: object ] ) : integer

Enumerates CSS rules defined and used by the document. Returns number of rules processed.

Where:

• callback is function( selector, file, lineNo, usageCounter ) that receives CSS selector , file URL, line number where the rule is defined and the number of DOM elements that use this rule to the moment of the documentRules() call.
• filter is an object that defines enumeration filter and CSS properties accessor callback. The filter object accepts the following optional fields:
• selector - string, if defined then the callback will receive only rules having that selector;
• file - string, url of CSS file where the rule is defined;
• lineNo - integer, line number in CSS file where the rule is defined;
• properties - function(props:object) : null | object , properties accessor function, the function will receive CSS properties defined by the rule. If the function returns an object then properties of the CSS rule will be updated by the object properties.

Therefore the documentRules function can be used as for inspection as for mutation of the CSS rules table associated with the document.

variable

( varName: string, [varToSet:value] ) : value | undefined

The method gets or sets (if varToSet provided) single CSS variable defined on the element.

variables

( [varsToSet:object] ) : object | undefined

The method gets or sets (if varsToSet provided) CSS variables defined on the element.