I'd like to get the evaluated output of a css calc that refers to vars from parent elements. For example, the example below should log 21 not NaN. Is there a way to do this?
let outer = document.getElementById('outer')
let inner = document.getElementById('inner')
outer.style.setProperty('--A',7)
inner.style.setProperty('--B',3)
inner.style.setProperty('--C','calc (var(--A) * var(--B))')
let a = Number(getComputedStyle(inner).getPropertyValue('--C'))
console.log(a)
//is there a way to log '21' as opposed to NaN?<div id="outer">
<div id="inner">
</div>
</div>
getPropertyValuereturnscalc (7 * 3)so you could write a function that performs this calculation and returns the result. Obviously theNumberconstructor doesn't know what to do with this string value which is why you are gettingNaN.--Aand--B--Aor--B. CallinggetPropertyValue('--C')already substitutes their values into the result it returns to you. Now, if--Aor--Bthemselves had acalc(...)in them, then yes, you'd need to go compute them first with this approach.