Este código me dará el valor x e y del clic en píxeles:
document.getElementById("game").addEventListener("click", function(event) { console.log(event.clientX, event.clientY); });Pero, ¿cómo obtengo los valores X e Y en comparación con VH (altura de la ventana gráfica) y VW (ancho de la ventana gráfica) (quiero obtener el valor de cómo en CSS puede configurar un elemento para que sea 20vh [20% de la altura de la ventana gráfica], etc.) etc)
¿Quiso decir algo como esto?
Solo necesita obtener el innerWidth y la altura innerHeight del elemento de la window y luego calcular el porcentaje con un producto cruzado
(elementX * 100) / viewport width (elementY * 100) / viewport heght document.getElementById("game") .addEventListener("click", function(event) { const debug = document.getElementById('debug'); const clickX = event.clientX; const clickY = event.clientY; const vh = window.innerHeight; const vw = window.innerWidth; const ratioX = (clickX * 100) / vw; const ratioY = (clickY * 100) / vh; debug.innerHTML = ''; debug.append(`X:${clickX} Y:${clickY}`); debug.append("\n"); debug.append(`%X:${ratioX} %Y:${ratioY}`); }); body { background-color: lemon; display: flex; width: 100vw; height: 100vh; flex-flow: column; justify-content: center; align-items: center; } #game { background-color: cyan; width: 29.7vw; height: 21vh; box-shadow: 0px 0px 2px rgba(0,0,0,.6), 0px 0px 6px rgba(0,0,0,.3); } <div id=game></div> <pre id=debug> X: Y: %X: %Y: </pre>Primero debe obtener el ancho de la ventana gráfica (vw) usando window.innerWidth y la altura de la ventana gráfica (vh) usando window.innerHeight .
Luego, divida event.clientX por vw y multiplíquelo por 100 para obtener el valor en porcentajes. La misma lógica para obtener las coordenadas Y, es decir, dividir event.clientY entre vh y multiplicar por 100 para obtener el valor en porcentajes.
Vea mi demostración a continuación: (Haga clic en Juego para obtener las coordenadas)
let gameEl = document.getElementById("game"), eCXinVWEl = document.getElementById("eCXinVW"), eCYinVHEl = document.getElementById("eCYinVH"); gameEl.addEventListener("click", function(event) { let vw = window.innerWidth, vh = window.innerHeight, eCXinVW = event.clientX / vw * 100, // Multiplying by 100 to get percentage eCYinVH = event.clientY / vh * 100; // Multiplying by 100 to get percentage console.log(eCXinVW, eCYinVH); eCXinVWEl.innerHTML = eCXinVW; eCYinVHEl.innerHTML = eCYinVH; }); .box { padding: 50px; } #game { padding: 20px; background: red; } <html> <head> </head> <body> <div class="box"> <h6>Event co-ordinates X by viewport width: <span id="eCXinVW">0</span>%</h6> <h6>Event co-ordinates Y by viewport height: <span id="eCYinVH">0</span>%</h6> <div id="game">Game</div> </div> </body> </html>