jq-cssvar
v1.0.1
Published
a jQuery plugin that allows the use of CSS variables in JS
Downloads
3
Maintainers
voltraReadme
cssVar - A jQuery plugin for handling CSS variables in Javascript
CSS variables are new to CSS3 and have many advantages over their prepocessors counterparts, such as being accessible in Javascript.
However accessing those variables in pure javascript tend to be an open door to very repetitive boilerplate, which is why I decided to created this plugin for jQuery.
It is originally a plugin from my other library (lightquery, currently in-dev), I just ported it to comply with jQuery's plugin syntax.
How to install/use ?
Witout NPM
<head>
<!-- [...] -->
<script src="path/to/jquery"></script>
<script src="path/to/the/cssVar/plugin"></script>
<!-- [...] -->
</head>Once that is done, you can use cssVar in any script loaded after the plugin.
With NPM
npm install jq-cssvar//We'll suppose that jQuery is already loaded (script tag or require) as $
require("path/to/the/cssVar/plugin")($);
//now loadedAccessing variables
:root{
--variable-name: 42;
}To access this variable, we simply use
jQuery.cssVar("--variable-name"); //returns 42
jQuery.cssVar("variable-name"); //equivalent, also returns 42Variable name selector
Because all CSS variable must start with "--", I made it possible to use the variables' names without "--". Therefore,
jQuery.cssVar("--x");and
jQuery.cssVar("x");are strictly equivalent.
Modifying global variables
:root{
--var: 404
}Just like any other plugin of jQuery, cssVar adopts the getter/setter syntax, therefore we can modify this variable like so :
jQuery.cssVar("var"); //returns 404
jQuery.cssVar("var", 42); //returns jQuery for chaining
jQuery.cssVar("var"); //returns 42Non-global (instance) variables
Even though using only global CSS variables is the best use case, sometimes you just need to have non-global variables/modify those variables locally. Therefore cssVar is also ready for this.
:root{
--var1: 404;
}
.class{
--var1: 42;
--var2: 40;
}jQuery(".class").cssVar("var1"); //returns 42
jQuery(".class").cssVar("var2"); //returns 40
jQuery.cssVar("var1"); //returns 404
jQuery(".class").eq(2).cssVar("var1", 41);
jQuery(".class").eq(0).cssVar("var1"); //returns 42
jQuery(".class").eq(2).cssVar("var1"); //returns 41
jQuery(".class").cssVar("var1", 440);
jQuery(".class").eq(0).cssVar("var1"); //returns 440
jQuery(".class").eq(2).cssVar("var1"); //returns 440Specifications
- The getter only retrieves the variable's value from the first element of the matched set
- The setter sets the variable's value for each element of the matched set
- CSS variables only accept numbers and strings, those are the only types of values that you can set those variables to
- If an error occurs, it returns what the method was called on (the matched set if instance, jquery if global)
- All modifications you can do to those variables follow the same rules as if they were done in CSS (cf. How to use CSS variables (MDN))