I created a function in JavaScript to apply a style.right to an element. Depending on the media width, I am applying one of the following three styles to it
listElements[i].style.right = "calc(425 * " + portfolioScrollPosition + "px)";
or
listElements[i].style.right = "calc(33.333 * " + portfolioScrollPosition + "vw)";
or
listElements[i].style.right = "calc(50 * " + portfolioScrollPosition + "vw)";
I need it to be written into html embedded styles EXACTLY like this. However, the calc() is simplifying, and is just writing something like calc(425px). Is there any way to prevent JS from making this simplification?
Getting it into the rendered style sheet is tricky but adding it to an elements in-line style that reads as you want it when examined in developer tools can be done by using template literals (see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals)
Elemement.setAttribute("style", `right:calc(425 * ${portfolioScrollPosition}px;`);
If you really need it in the style sheet, you would have to change the inner text of the entire style element.
<style></style> is like any other element, you can make a reference to it and change it's inner text using element.textContent = "" or element.innerText. It will be messy with a big style sheet.
Edit I've made a working example to illustrate the approach of re-writing the style element's innerText here: https://jsfiddle.net/DaveCP/8czrnhwe/1/
(the SO snippet tool has trouble with new line characters in a string).
In the example, the style rule aspect-ratio: calc(2 / 1); is re-written to aspect-ratio: calc(4 / 1)