Styled

styled is a utility JavaScript library for control dom inline-style.

Introduction

Installation

Yarn

yarn add @pluginjs/styled

NPM

npm i @pluginjs/styled

Getting Started

CDN:

Development:

<script src="https://unpkg.com/@pluginjs/styled/dist/styled.js"></script>

Production:

<script src="https://unpkg.com/@pluginjs/styled/dist/styled.min.js"></script>

API

setStyle

Parameters

| Name | Type | Description | |||-| | style | StyleSheet | | | element | HTMLElement | |

Returns

| Name | Type | Description | |||-| | element | HTMLElement | |

outerHeight

Parameters

| Name | Type | Description | |||-| | element | HTMLElement | |

Returns

| Name | Type | Description | |||-| | outerHeight | Number | |

outerHeightWithMargin

Parameters

| Name | Type | Description | |||-| | element | HTMLElement | |

Returns

| Name | Type | Description | |||-| | outerHeightWithMargin | Number | |

outerWidth

Parameters

| Name | Type | Description | |||-| | element | HTMLElement | |

Returns

| Name | Type | Description | |||-| | outerWidth | Number | |

outerWidthWithMargin

Parameters

| Name | Type | Description | |||-| | element | HTMLElement | |

Returns

| Name | Type | Description | |||-| | outerWidthWithMargin | Number | |

getStyle

Parameters

| Name | Type | Description | |||-| | attribute | String | | | element | HTMLElement | |

Returns

| Name | Type | Description | |||-| | style | String | |

innerHeight

Parameters

| Name | Type | Description | |||-| | element | HTMLElement | |

Returns

| Name | Type | Description | |||-| | innerHeight | Number | |

innerWidth

Parameters

| Name | Type | Description | |||-| | element | HTMLElement | |

Returns

| Name | Type | Description | |||-| | innerWidth | Number | |

getWidth

Parameters

| Name | Type | Description | |||-| | element | HTMLElement | |

Returns

| Name | Type | Description | |||-| | getWidth | Number | |

getHeight

Parameters

| Name | Type | Description | |||-| | element | HTMLElement | |

Returns

| Name | Type | Description | |||-| | getWidth | Number | |

offset

Parameters

| Name | Type | Description | |||-| | element | HTMLElement | |

Returns

| Name | Type | Description | |||-| | offset | { top: String, left: String } | |

css

Parameters

| Name | Type | Description | |||-| | element | HTMLElement | | | style | StyleSheet | |

Returns

| Name | Type | Description | |||-| | styleValue | String | |

hideElement

Parameters

| Name | Type | Description | |||-| | element | HTMLElement | |

Returns

| Name | Type | Description | |||-| | element | HTMLElement | |

showElement

Parameters

| Name | Type | Description | |||-| | element | HTMLElement | |

Returns

| Name | Type | Description | |||-| | element | HTMLElement | |

Browser support

Tested on all major browsers.

| IE / Edge | Firefox | Chrome | Safari | Opera | | --------- | --------- | --------- | --------- | --------- | | IE11, Edge| last 2 versions| last 2 versions| last 2 versions| last 2 versions|

License

@pluginjs/styled is Licensed under the GPL-v3 license.

If you want to use @pluginjs/styled project to develop commercial sites, themes, projects, and applications, the Commercial license is the appropriate license. With this option, your source code is kept proprietary.

For purchase an Commercial License, contact us [email protected].

Copyright

Copyright (C) 2022 Creation Studio Limited.