Style Properties

JavaScript library for working with style properties of an element in unified format.

Documentation

StyleProperty

Parameters

• element

Properties

• unit string unit of the property, e.g. px, rgb
• value (string | number) value of the property
• output string valid string representation of value and unit

Examples

Simple property.

{
  unit: 'px',
  value: 100,
  output: '100px'
}

Color property.

{
  unit: 'rgb',
  value: [255, 255, 255],
  output: '#ffffff'
}

fixWebcomponentsElement

Attempts to fix the element when using Webcomponents with ShadowDOMPolyfill. It returns either original element or wrapped element, depending on whether the polyfill replaced the original getComputedStyle method or not. This is madness and no sane person should ever do hacks like this. ShadowDOMPolyfill sucks donkey balls!

Parameters

• element (Object | HTMLElement)

Returns (Object | HTMLElement)

getStyleProperty

Returns information about unit and value of given property for given element.

Parameters

• element HTMLElement
• property string Name of the property. You can use either camelCase (e.g. zIndex) or kebab-case (e.g. z-index).

Examples

var element_width = getStyleProperty(my_element, 'width');
// returns {unit: 'px', value: 100, output: '100px'}

Returns StyleProperty

getStyleProperties

Returns information about multiple properties of given element.

Parameters

• element HTMLElement
• properties [(Array | string)](default []) List of properties. Single property (string) will be converted to an array.

Examples

var element_size = getStyleProperties(my_element, ['width', 'height']);
// returns
// {
//   width: {unit: 'px', value: 100, output: '100px'},
//   height: {unit: 'px', value: 100, output: '100px'}
// }

Returns Object Keys of the returned objects are property names, values are objects containing information about given property.

Bug reports, feature requests and contact

If you found any bugs, if you have feature requests or any questions, please, either file an issue at GitHub or send me an e-mail at [email protected].

License

Style Properties is published under the MIT license.