Javascript document.querySelector just need the value

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

MEDevel.com: Open-source for Healthcare and Education

Collecting and validating open-source software for healthcare, education, enterprise, development, medical imaging, medical records, and digital pathology.

Visit Medevel

however i receive the full code like above.

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

>Solution :

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