Javascript document.querySelector just need the value

Question

my webpage excerpt looks like this

<div class="current-timestamp" style="--duration:"00:13:19"; --absolute-position:"00:00:00";"><span class="position"></span><span class="divider"></span><span class="duration"></span></div>

i try to get the value 00:13:19 via the chrome console with this command

document.querySelector(".current-timestamp");

however i receive the full code like above.

What do i need to do to just receive "00:13:19"?

Answer 1

It's not common to store the value of a component in a CSS variable like you have done, however it can be accessed in the following way:

getComputedStyle(document.querySelector(".current-timestamp")).getPropertyValue("--duration");

Essentially, we are getting the computed style of the element in question, and then using getPropertyValue to get the value of the duration variable on the element.

However, I would highly advise against using CSS variables for storing non-style related values in the future.

Edit: This can actually be done using the style property directly, as this is set on the element itself:

document.querySelector(".current-timestamp").style.getPropertyValue("--duration");