Rather than using
element.style[prop] = ...
, I suspect you need to use
element.style.setProperty(prop, ...);
.
Here's a simple analog clock demo:
<div id="clock">
<div id="hour-hand"></div>
<div id="minute-hand"></div>
<div id="second-hand"></div>
</div>
#clock {
position: absolute;
top: 50%;
left: 50%;
width: 400px;
height: 400px;
border: 4px solid black;
border-radius: 50%;
transform: translate(-50%, -50%);
--hour: 0;
--minute: 0;
--second: 0;
}
#hour-hand, #minute-hand, #second-hand {
position: absolute;
top: 50%;
left: 50%;
height: var(--height);
transform-origin: top left;
transform: rotate(var(--angle)) translateY(calc(var(--height) / -2));
}
#hour-hand {
--height: 8px;
width: 40%;
background-color: black;
--hour-angle: calc(360deg * var(--hour) / 12);
--minute-angle: calc(30deg * var(--minute) / 60);
--angle: calc(var(--hour-angle) + var(--minute-angle) - 90deg);
}
#minute-hand {
--height: 4px;
width: 45%;
background-color: blue;
--minute-angle: calc(360deg * var(--minute) / 60);
--second-angle: calc(6deg * var(--second) / 60);
--angle: calc(var(--minute-angle) + var(--second-angle) - 90deg);
}
#second-hand {
--height: 2px;
width: 50%;
background-color: silver;
--second-angle: calc(360deg * var(--second) / 60);
--angle: calc(var(--second-angle) - 90deg);
}
const clock = document.getElementById("clock");
const updateClock = function(){
const now = new Date();
clock.style.setProperty("--hour", now.getHours());
clock.style.setProperty("--minute", now.getMinutes());
clock.style.setProperty("--second", now.getSeconds());
};
updateClock();
setInterval(updateClock, 1000);
Edit fiddle - JSFiddle - Code Playground[
^]