这段代码会给我点击像素的x和y值：
document.getElementById("game").addEventListener("click", function(event) {
console.log(event.clientX, event.clientY);
});
但是，我如何获得与VH(视口高度(和VW(视口宽度(相比的X和Y值(我想获得类似CSS中如何将元素设置为20vh[20%的视口高度]等的值(
首先需要使用window.innerWidth获取视口宽度(vw(，使用window.innerHeight获取视口高度(vh(。
然后，将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>你的意思是这样的吗？
您只需要从window元素中获得innerWidth和innerHeight，然后使用叉积计算百分比
(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>