從JS中的onclick事件獲取VW/VH位置-有解無憂

此代碼將為我提供單擊的 x 和 y 值（以像素為單位）：

document.getElementById("game").addEventListener("click", function(event) {
   console.log(event.clientX, event.clientY);
});

但是如何獲得與 VH（視口高度）和 VW（視口寬度）比較的 X 和 Y 值（我想獲得像在 CSS 中如何將元素設定為 20vh [視口高度的 20%）等的值等等）

uj5u.com熱心網友回復：

您首先需要使用獲取視口寬度 (vw) 并使用獲取window.innerWidth視口高度 (vh) window.innerHeight。

然后，除以event.clientX乘以vw得到100百分比值。獲取 Y 坐標的邏輯相同，即除以event.clientY乘以vh得到100百分比值。

請參閱下面的演示：（單擊游戲獲取坐標）

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>

uj5u.com熱心網友回復：

你的意思是這樣的嗎？

您只需要從元素中獲取innerWidthand 而不是使用叉積計算百分比innerHeightwindow

(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>

轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/438953.html

標籤：javascript css dom 添加事件监听器视口单位

上一篇：單擊按鈕時如何更改表格內的值？

下一篇：如何顯示表格標題但值顯示“？”