getComputedElementStyle

[ Function ]

public static getComputedElementStyle(
    element: Jquery<Element> | readonly Element[] | NodeListOf<Element> | HTMLCollectionOf<Element> | Element | undefined
): Dictionary<string>;

Returns all active CSS properties of an HTML element. This also takes into account properties that affect CSS files. If the transferred object contains several elements (like for an jQuery collection), the first element is used.

Parameter

Name

Type

Description

element

Info: Type Element supported from version 1.10
Info: Types Element[] | NodeListOf<Element> | HTMLCollectionOf<Element> from version 1.10.1171.21

JQuery<Element>,readonly Element[], NodeListOf<Element>, HTMLCollectionOf<Element>, Element, undefined

  • jQuery collection with the element to be verified
  • any array-like element list (also for example from document.querySelectorAll() or document.getElementsByClassName())
  • individual element, for example HTML or SVG element.

Return value

Type

Description

Dictionary<string>

Object with all CSS properties of the first element in the jQuery collection.

Returns an empty object in the event of an error.

getComputedElementStyle 1:

Available from version 1.10

Sample - JavaScript

var control = TcHmi.Controls.get('TcHmiButton');
if(control === undefined){ 
    return; 
}
var cntrlElem = control.getElement();
var allStyles = TcHmi.StyleProvider.getComputedElementStyle(cntrlElem);
/* returns:
{
    'animation-delay': '0s',
    'animation-direction': 'normal', 
    'animation-duration': '0s', 
    'animation-fill-mode': 'none', 
    … many many more
}*/
TcHmi.Log.debug('Border Width is: '+ allStyles['border-width']);