css-proxy
Install
npm install --save css-proxy
Usage
//script.js;//Calling cssProxy without an element uses document.documentElementlet css = ; //The body background-color will change to green//cssProxy decamelizes bgColor to bg-colorcssbgColor = 'green';
/*styles.css*/
The HTML file:
Hello World! Hello World! Hello universe too!
The API
cssProxy(element, props, pseudo) -> css
The default for element
is document.documentElement. element
can be passed a DOM element of your choosing.
Pass a POJO to props
to set them on element.style
.
Pass a pseudo-element to pseudo
for getComputedStyle(element, pseudo)
.
cssProxy()
with all it's parameters:
let css = ;
Setting properties
Set, and get what ever properties you like on the object returned by cssProxy()
. This includes properties that correspond to element.style.color
, or element.style['any css property']
.
You can set CSS custom properties too.
Like:
let css = ;//A normal css propertycssbackgroundColor = 'blue';//A css custom propertycssbgColor = 'green';
Methods
css.setProperty(name, value, priority)
This equivalent to CSSStyleDeclaration.setProperty()
.
css.getProperty(name)
This is equivalent to CSSStyleDeclaration.getPropertyValue()
.
css.cssGet(name)
css.cssGet()
works like css.getProperty()
, but css.cssGet()
also decamelizes the name
parameter.
css.cssSet(name, value, priority)
css.cssSet()
works like css.setProperty()
, but css.cssSet()
decamelizes the name
parameter, and changes a value
of --custom-property
, or --customProperty
to var(--custom-property)
. You also pass var(--custom-property)
, or any other valid CSS property value to the value
argument.
css.remove(prop)
Remove the style property from the element
.
css.setAll(object)
From object
add it's properties, and values to element.style
.
Notes
getComputedStyle
is used by css-proxy. getComputedStyle
is not supported by IE, but we don't care about that because we're using Proxy. Also new Proxy(object, handler)
is not supported by all browsers either.