1.0.0 • Published 5 years ago
css-func v1.0.0
css-func
Handle CSS style functions with no worries.
Install
npm i -S css-func
Usage
Examples on how it can be used
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
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
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
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
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
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
cssfunc(element, 'transform').exists('rotate');
Returns
boolean
True if function exists
License
1.0.0
5 years ago