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 loaded

Accessing 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 42

Variable 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 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.

: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 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))

Keywords

FAQs

What is jq-cssvar?

Is jq-cssvar popular?

Is jq-cssvar well maintained?

Package last updated on 15 Jul 2017

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

jq-cssvar

cssVar - A jQuery plugin for handling CSS variables in Javascript