Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/alexcambose/css-func
Handle CSS style functions with no worries
https://github.com/alexcambose/css-func
attributes browser css helper html javascript javascript-library npm programatically style transform ux
Last synced: 22 days ago
JSON representation
Handle CSS style functions with no worries
- Host: GitHub
- URL: https://github.com/alexcambose/css-func
- Owner: alexcambose
- License: mit
- Created: 2018-12-30T21:52:19.000Z (about 6 years ago)
- Default Branch: master
- Last Pushed: 2018-12-31T13:52:56.000Z (about 6 years ago)
- Last Synced: 2024-05-21T04:21:14.904Z (9 months ago)
- Topics: attributes, browser, css, helper, html, javascript, javascript-library, npm, programatically, style, transform, ux
- Language: JavaScript
- Homepage: https://www.npmjs.com/package/css-func
- Size: 9.77 KB
- Stars: 2
- Watchers: 3
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# css-func
Handle CSS style functions with no worries.
[](https://travis-ci.org/alexcambose/css-func)
[](https://coveralls.io/github/alexcambose/css-func?branch=master)
## Install
```bash
npm i -S css-func
```
## Usage
Examples on how it can be used
```js
const cssfunc = require('css-func');
// get dom element
const element = document.getElementById('#element');
// different ways to specify function parameters
cssfunc(element, 'transform').add('translate', '10px'); // "translate(10px)"
cssfunc(element, 'transform').add('translate', ['10px']); // "translate(10px)"
cssfunc(element, 'transform').add('translate', ['10px', '20px']); // "translate(10px, 20px)"
cssfunc(element, 'transform').add('rotate', '20deg'); // "rotate(20deg)"
console.log(element.style.transform); // "translate(10px, 20px) rotate(20deg)"
```
Custom variable that holds the `cssfunc` instance
```js
const filters = cssfunc(element, 'filter');
filters.add('blur', '10px');
filters.add('grayscale', '100%');
filters.update('blur', '20px');
filters.delete('blur');
filters.exists('blur'); // false
filters.get(); // "grayscale(100%)"
```
## API
#### get()
Gets the property from element
##### Examples
```javascript
cssfunc(element, 'transform').get(); // "translate(10px, 20px) scale(1.1)"
```
##### Returns
- `string` Element property value
#### add(fproperty, value[, autoUpdate=true])
Adds or updates a function
##### Parameters
| Name | Type | Description | |
| -------------------- | ---------------- | ------------------------------------------------------------------------------------------------------------ | ---------- |
| fproperty | `string` | CSS function name | |
| value | `string` `array` | CSS function parameters | |
| autoUpdate=true | `boolean` | True to automatically update function if aleady presentTrue to automatically add new function if not present | _Optional_ |
##### Examples
```javascript
cssfunc(element, 'transform').add('rotate', '10px');
cssfunc(element, 'transform').add('translate', ['10px', '20px']);
cssfunc(element, 'transform').add('translateX', ['10px']);
```
##### Returns
- `boolean` True if a function was added or updated
#### update(fproperty, value[, autoAdd=true])
Updates or adds a function
##### Parameters
| Name | Type | Description | |
| ----------------- | ---------------- | ----------------------------------------------------- | ---------- |
| fproperty | `string` | CSS function name | |
| value | `string` `array` | CSS function parameters | |
| autoAdd=true | `boolean` | True to automatically add new function if not present | _Optional_ |
##### Examples
```javascript
cssfunc(element, 'transform').update('rotate');
```
##### Returns
- `boolean` True if a function was updated or added
#### delete(fproperty)
Delete functoin from element style property
##### Parameters
| Name | Type | Description |
| --------- | -------- | ----------------- |
| fproperty | `string` | CSS function name |
##### Examples
```javascript
cssfunc(element, 'transform').delete('rotate');
```
##### Returns
- `boolean` True if there was a function to delete
#### exists(fproperty)
Returns true if function exists
##### Parameters
| Name | Type | Description |
| --------- | -------- | ----------------- |
| fproperty | `string` | CSS function name |
##### Examples
```javascript
cssfunc(element, 'transform').exists('rotate');
```
##### Returns
- `boolean` True if function exists
---
## License
[MIT](LICENSE)