Tengo el siguiente código:
<div id="container"></div> y en mi código JavaScript, estoy tratando de establecer su valor de propiedad left en el resultado de un cálculo. Este mismo cálculo funciona en CSS pero no cuando se usa en código JavaScript.
var element = document.getElementById("container"); element.style.left = "calc(" + (container.clientWidth + containerUnit + " / 2 - " + child.clientWidth + unit + " / 2") + ");"; Pero, console.log(element.style.left) devuelve: (valor en blanco aquí). Y al configurar este estilo en JS, no se produce ningún efecto en el elemento.
containerUnint contiene "px" y unit contiene "%"
El problema es que está pasando un valor no válido a calc() , por lo que el navegador no lo está aplicando. Debe especificar medidas para que CSS comprenda cómo ejecutar realmente el cálculo.
Su concatenación actual se compila en algo como:
calc(200 / 2 - 10 / 2);Supongo que está trabajando en píxeles, por lo que debe actualizar su definición de la siguiente manera:
element.style.left = "calc(" + (container.clientWidth + containerUnit + "px / 2 - " + child.clientWidth + unit + "px / 2") + ")"; Tenga en cuenta que también debe perder el seguimiento ; :
const element = document.getElementById("container"); const containerUnit = '%'; const unit = 'px'; element.style.left = "calc(" + (10 + containerUnit + " / 2 - " + 10 + unit + " / 2") + ")"; console.log(element.style.left) <div id="container"></div>