文章/答案/技术大牛

发布

社区首页 >问答首页 >如何将offsetX和offsetY坐标从像素更改为百分比？

问如何将offsetX和offsetY坐标从像素更改为百分比？
EN

Stack Overflow用户

提问于 2019-10-09 16:27:53

回答 1查看 323关注 0票数 0

我正在开发一个工具，我想要百分比(%)格式的offsetX和offsetY坐标，同时悬停在div元素上。默认情况下，它以像素格式出现。

index.html文件：

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

event.js文件：

new Vue({
      el: '#vue-events',
      methods:{
        updateXY: function(event){
           this.x = event.offsetX;
           this.y = event.offsetY;
        }
      }
    });

javascript

html

css

vue.js

回答 1

Stack Overflow用户

回答已采纳

发布于 2019-10-09 16:48:34

你必须自己计算这个

你得到窗口的宽度和高度，在此基础上你可以计算百分比。但请记住，如果调整窗口大小，该值可能会有所不同。

   new Vue({
      el: '#vue-events',
      methods:{
        updateXY: function(event){
           this.x = (event.offsetX * 100) / window.innerWidth;
           this.y = (event.offsetY * 100) / window.innerHeight;
        }
      }
    });

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/58299967

复制

相似问题

问如何将offsetX和offsetY坐标从像素更改为百分比？
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何将offsetX和offsetY坐标从像素更改为百分比？EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何将offsetX和offsetY坐标从像素更改为百分比？
EN