JS with CSS variable using function

JavaScript's getPropertyValue function returns text rather than computed value of CSS variables using functions

by fthompson

HTML

<div class='container'>
  <div class='dot'></div>
</div>
<pre>
--dot-size:&#9;<span id='dot-size'></span>
</pre>
<pre>
--dot-position:&#9;<span id='dot-position'></span>
</pre>
<pre>
dot top:&#9; <span id='dot-top'></span>
</pre>
<pre>
dot left:&#9; <span id='dot-left'></span>
</pre>

CSS

:root {
  --container-size: 100px;
  --dot-size: 5px;
  --dot-position: calc((var(--container-size) - var(--dot-size)) / 2);
}

.container {
  width: var(--container-size);
  height: var(--container-size);
  background-color: lightgray;
}

.dot {
  width: var(--dot-size);
  height: var(--dot-size);
  background-color: red;
  position: relative;
  top: var(--dot-position);
  left: calc((var(--container-size) - var(--dot-size)) / 2);;
}

JavaScript

let dot = document.querySelector('.dot');
let dotStyle = window.getComputedStyle(dot);
let dotSize = dotStyle.getPropertyValue('--dot-size');
document.getElementById('dot-size').innerHTML = dotSize;
let dotPosition = dotStyle.getPropertyValue('--dot-position');
document.getElementById('dot-position').innerHTML = dotPosition;
let dotTop = dotStyle.getPropertyValue('top');
document.getElementById('dot-top').innerHTML = dotTop;
let dotLeft = dotStyle.getPropertyValue('left');
document.getElementById('dot-left').innerHTML = dotLeft;