Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/voltra/jquerycssvar
A jQuery plugin that allows the use of CSS variables in JS
https://github.com/voltra/jquerycssvar
css-variables javascript javascript-library jquery-plugin
Last synced: about 8 hours ago
JSON representation
A jQuery plugin that allows the use of CSS variables in JS
- Host: GitHub
- URL: https://github.com/voltra/jquerycssvar
- Owner: Voltra
- License: mit
- Created: 2017-07-15T13:49:13.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2017-07-15T18:32:21.000Z (over 7 years ago)
- Last Synced: 2024-10-07T15:05:12.105Z (about 1 month ago)
- Topics: css-variables, javascript, javascript-library, jquery-plugin
- Language: JavaScript
- Homepage: https://www.npmjs.com/package/jq-cssvar
- Size: 6.84 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# 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***
```html
```
Once that is done, you can use cssVar in any script loaded after the plugin.
***With NPM***
```
npm install jq-cssvar
```
```javascript
//We'll suppose that jQuery is already loaded (script tag or require) as $
require("path/to/the/cssVar/plugin")($);
//now loaded
```
## Accessing variables ##
```css
:root{
--variable-name: 42;
}
```
To access this variable, we simply use
```javascript
jQuery.cssVar("--variable-name"); //returns 42
jQuery.cssVar("variable-name"); //equivalent, also returns 42
```
## Variable name selector ##
Because all CSS variable must start with "--", I made it possible to use the variables' names without "--".
Therefore,
```javascript
jQuery.cssVar("--x");
```
and
```javascript
jQuery.cssVar("x");
```
are strictly equivalent.
## Modifying global variables ##
```css
:root{
--var: 404
}
```
Just like any other plugin of jQuery, cssVar adopts the getter/setter syntax, therefore we can modify this variable like so :
```javascript
jQuery.cssVar("var"); //returns 404
jQuery.cssVar("var", 42); //returns jQuery for chaining
jQuery.cssVar("var"); //returns 42
```
## Non-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.
```css
:root{
--var1: 404;
}
.class{
--var1: 42;
--var2: 40;
}
```
```javascript
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 440
```
## Specifications ##
- 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)](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables))