<p id="p1" class="cls">Some text.  Should be red</p>
<p id="p2" class="cls" style="--var1: blue">Some text.  Should be blue</p>
<p id="p3" class="cls">Some text.  Should be green</p>
:root {
  --var1: red;
}

.cls {
  color: var(--var1);
}
$('#p3').attr('style','--var1: green');

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js