style-properties

JavaScript library for getting information about element style properties in unified and usable format.

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
style-properties
111.3.16 years ago7 years agoMinified + gzip package size for style-properties in KB

Readme

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

Returns (Object \| HTMLElement)

getStyleProperty

Returns information about unit and value of given property for given element.
Parameters
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
\(Array \| string) 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 riki@fczbkk.com.

License

Style Properties is published under the MIT license.