Nerdy Pun Mavens

    style-properties

    1.3.1 • Public • Published

    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

    • 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 riki@fczbkk.com.

    License

    Style Properties is published under the MIT license.

    Keywords

    none

    Install

    npm i style-properties

    DownloadsWeekly Downloads

    237

    Version

    1.3.1

    License

    MIT

    Last publish

    Collaborators

    • fczbkk