Style Properties
JavaScript library for working with style properties of an element in unified format.Documentation
StyleProperty
Parameterselement
Properties
unit
string unit of the property, e.g. px, rgbvalue
(string \| number) value of the propertyoutput
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 originalgetComputedStyle
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
HTMLElementproperty
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
HTMLElementproperties
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.