clear

getCssProperty

Get a css property from a DOM-element selected by given selector. The return value is formatted to be testable. Colors gets parsed via rgb2hex and all other properties gets parsed via css-value.

Note that shorthand CSS properties (e.g. background, font, border, margin, padding, list-style, outline, pause, cue) are not returned, in accordance with the DOM CSS2 specification- you should directly access the longhand properties (e.g. background-color) to access the desired values.

Usage

1
client.getCssProperty(selector,cssProperty).then(callback);

Parameters

Param Type Details
selector String element with requested style attribute
cssProperty String css property name

Example

getCssProperty.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
client.getCssProperty('#someElement', 'color').then(function(color) {
    console.log(color);
    // outputs the following:
    // {
    //     property: 'color',
    //     value: 'rgba(0, 136, 204, 1)',
    //     parsed: {
    //         hex: '#0088cc',
    //         alpha: 1,
    //         type: 'color',
    //         rgba: 'rgba(0, 136, 204, 1)'
    //     }
    // }
});

client.getCssProperty('#someElement', 'width').then(function(width) {
    console.log(width);
    // outputs the following:
    // {
    //     property: 'width',
    //     value: '100px',
    //     parsed: {
    //         type: 'number',
    //         string: '100px',
    //         unit: 'px',
    //         value: 100
    //     }
    // }
});

client.getCssProperty('body', 'font-family').then(function(font) {
    console.log(font);
    // outputs the following:
    // {
    //      property: 'font-family',
    //      value: 'helvetica',
    //      parsed: {
    //          value: [ 'helvetica', 'arial', 'freesans', 'clean', 'sans-serif' ],
    //          type: 'font',
    //          string: 'helvetica, arial, freesans, clean, sans-serif'
    //      }
    //  }
})

Uses