La mayoría de las respuestas a esta pregunta dan una solución similar a:
let x_pos=42, y_pos=43; var d = document.getElementById('yourDivId'); d.style.position = "absolute"; d.style.left = x_pos+'px'; d.style.top = y_pos+'px';pero, ¿no es caro cambiar la posición, convertir los números enteros en cadenas y hacer algunas concatenaciones?
Creo que el navegador probablemente hará exactamente los cálculos inversos para obtener los valores enteros nuevamente.
No es tan costosoconcatenar cadenas en los navegadores modernos hoy en día. Aquí hay una fábrica para mover un elemento a (otra) posición, usando un pequeño ayudante para convertir números a unidades.
// factory to avoid recreating [number2Unit] for every call and // and delegate the actual styling to small methods. function moveElToFactory(ux = `px`, uy = `px`) { const number2Unit = (nr, unit) => `${nr}${unit}`; const moveX = (el, x, unit) => el.style.left = number2Unit(x, unit); const moveY = (el, y, unit) => el.style.top = number2Unit(y, unit); return (el, x, y, uX = ux, uY = uy) => { el.style.position = `absolute`; y && moveY(el, y, uY); x && moveX(el, x, uX); } } // demo const moveElTo = moveElToFactory(); setTimeout(() => { const [d1, d2, d3] = [ document.querySelector('#div1'), document.querySelector('#div2'), document.querySelector('#div3')] moveElTo(d1, 42, 43); d1.textContent += ` [x, y] ${d1.style.left}, ${d1.style.top}`; moveElTo(d2, 15, 50, `vw`, `%`); d2.textContent += ` [x, y] ${d2.style.left}, ${d2.style.top}`; moveElTo(d3, ...[,35,,`%`]); d3.textContent += ` [x, y] 0, ${d3.style.top}`; }, 1000); <div id="div1">where am I (div#div1)?</div> <div id="div2">And where am I (div#div2)?</div> <div id="div3">And I (div#div3) am where?</div>