@pluginjs/styled
Version:
A flexible modern styled js plugin.
257 lines (164 loc) • 4.76 kB
Markdown
# Styled
[](https://www.npmjs.com/package/@pluginjs/styled)
`styled` is a utility JavaScript library for control dom inline-style.
## Introduction
### Installation
#### Yarn
```javascript
yarn add @pluginjs/styled
```
#### NPM
```javascript
npm i @pluginjs/styled
```
## Getting Started
**CDN:**
Development:
```html
<script src="https://unpkg.com/@pluginjs/styled/dist/styled.js"></script>
```
Production:
```html
<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.
| [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png" alt="IE / Edge" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>IE / Edge | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png" alt="Firefox" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Firefox | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png" alt="Chrome" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Chrome | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png" alt="Safari" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Safari | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/opera/opera_48x48.png" alt="Opera" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>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](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 purchase@thecreation.co.
## Copyright
Copyright (C) 2022 [Creation Studio Limited](creationstudio.com).