<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');