getComputedElementStyle

[ Function ]

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

Returns several 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.

propertyNames

string[]

String vector of the names of the CSS properties

Return value

Type

Description

Dictionary<string>

Object with the CSS properties of the first element in the jQuery collection. If a requested property is not (or no longer) set, this entry is not set in the object.

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 someStyles = TcHmi.StyleProvider.getComputedElementStyle(cntrlElem, 
     ['border-width', 'height', 'does-not-exist']
);
/* returns:
{
    'border-width': '0px',
    'height': '50px'
}
*/
TcHmi.Log.debug('Border Width is: '+ someStyles['border-width']);