<p id="box1">
  Lorem ipsum dolor sit amet consectetur adipisicing elit. Deleniti quod, natus sint iure perferendis illo unde labore, dolore quisquam consequuntur necessitatibus porro! Iste ea ad nostrum qui tenetur adipisci repudiandae!
</p>  

<p id="box2">
  Lorem ipsum dolor sit amet consectetur adipisicing elit. Deleniti quod, natus sint iure perferendis illo unde labore, dolore quisquam consequuntur necessitatibus porro! Iste ea ad nostrum qui tenetur adipisci repudiandae!
</p>  
:root {
  --color: black;
  color: var(--color);
}

p {
  color: var(--color);
}
// Read
var box1Color = $('#box1').css('--color').trim();
console.log(box1Color);


// Write
$('#box2').css('--color', 'blue');

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

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