title: Accessing a CSS custom property (aka CSS variable) through JavaScript
body: <p>How do you get and set CSS custom properties (those accessed with <code>var(…)</code> in the stylesheet) using JavaScript (plain or jQuery)?</p>
  
  <p>Here is my unsuccessful try: clicking on the buttons changes the usual <code>font-weight</code> property, but not the custom <code>--mycolor</code> property:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;html&gt;
  &lt;head&gt;
    &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"&gt;&lt;/script&gt;
    &lt;style&gt;
      body { 
        --mycolor: yellow;
        background-color: var(--mycolor);
      }
    &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
    &lt;p&gt;Let's try to make this text bold and the background red.&lt;/p&gt;
    &lt;button onclick="plain_js()"&gt;Plain JS&lt;/button&gt;
    &lt;button onclick="jQuery_()"&gt;jQuery&lt;/button&gt;
  
    &lt;script&gt;
    function plain_js() { 
      document.body.style['font-weight'] = 'bold';
      document.body.style['--mycolor'] = 'red';
    };
    function jQuery_() {
      $('body').css('font-weight', 'bold');
      $('body').css('--mycolor', 'red');
    }
    &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>