Creé una función en JavaScript para aplicar un style.right a un elemento. Dependiendo del ancho del medio, le estoy aplicando uno de los siguientes tres estilos
listElements[i].style.right = "calc(425 * " + portfolioScrollPosition + "px)";o
listElements[i].style.right = "calc(33.333 * " + portfolioScrollPosition + "vw)";o
listElements[i].style.right = "calc(50 * " + portfolioScrollPosition + "vw)"; Necesito que se escriba en estilos html incrustados EXACTAMENTE así. Sin embargo, calc() está simplificando y solo está escribiendo algo como calc(425px) . ¿Hay alguna forma de evitar que JS haga esta simplificación?
Obtenerlo en la hoja de estilo renderizada es complicado, pero agregarlo a un estilo en línea de elementos que se lea como desee cuando se examine en las herramientas de desarrollo se puede hacer usando literales de plantilla (consulte https://developer.mozilla.org/en -US/docs/Web/JavaScript/Reference/Template_literals )
Elemement.setAttribute("style", `right:calc(425 * ${portfolioScrollPosition}px;`); Si realmente lo necesita en la hoja de estilo, deberá cambiar el texto interno de todo el elemento de estilo. <style></style> es como cualquier otro elemento, puede hacer referencia a él y cambiar su texto interno usando element.textContent = "" o element.innerText . Será complicado con una gran hoja de estilo.
Editar He hecho un ejemplo de trabajo para ilustrar el enfoque de volver a escribir el innerText style : https://jsfiddle.net/DaveCP/8czrnhwe/1/ (la herramienta de fragmento SO tiene problemas con los caracteres de nueva línea en una cadena ).
En el ejemplo, la aspect-ratio: calc(2 / 1); se reescribe en aspect-ratio: calc(4 / 1)