Javascript 如何将offsetX和offsetY坐标从像素更改为百分比？
我正在开发一个工具，在这个工具中，我希望offsetX和offsetY坐标以百分比（%）格式显示，同时将鼠标悬停在div元素上。默认情况下，它采用像素格式 index.html文件：Javascript 如何将offsetX和offsetY坐标从像素更改为百分比？,javascript,html,css,vue.js,Javascript,Html,Css,Vue.js,我正在开发一个工具，在这个工具中，我希望offsetX和offsetY坐标以百分比（%）格式显示，同时将鼠标悬停在div元素上。默认情况下，它采用像素格式 index.html文件： <!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title>Events</title>
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Events</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<link rel="stylesheet" href="style/style.css">
</head>
<body>
<div id="vue-events">
<h1>Events in VueJS</h1>
<div id="canvas" v-on:mousemove="updateXY">
<img src="img/img-1.jpg" style="visibility: hidden;" />
{{x}}, {{y}}
</div>
</div>
<script src="js/events.js"></script>
</body>
</html>
你得自己计算一下 您可以得到窗口的宽度和高度，并在此基础上计算百分比。但请记住，如果调整窗口大小，值可能会有所不同
new Vue({
el: '#vue-events',
methods:{
updateXY: function(event){
this.x = (event.offsetX * 100) / window.innerWidth;
this.y = (event.offsetY * 100) / window.innerHeight;
}
}
});
new Vue({
el: '#vue-events',
methods:{
updateXY: function(event){
this.x = (event.offsetX * 100) / window.innerWidth;
this.y = (event.offsetY * 100) / window.innerHeight;
}
}
});