JavaScript マウスの座標をpxから%の割り出し

Question

前提・実現したいこと

対象オブジェクトにマウスを移動させるとオブジェクト上のX、Y座標を取得します

それはpx単位で表示されます

このpxからオブジェクトの%の位置を割り出したいです

例えばwidth:80%の地点にマウスがあればXは80%と出したいです

高さはheight:46%の位置にあればYは46%と出したいのですが

どのように割り出しを行えばいいかわかりません

詳しい方回答お願いいたします

該当のソースコード

<div id="divx" style="width:100%;height:100%;background:deepskyblue">
<span id="xs"></span>
<span id="ys"></span>
</div>

<script>
window.onload=function(){
divx.addEventListener('mousemove', xy);
}

function xy(e) {
var target_rect = e.currentTarget.getBoundingClientRect();
var xx = e.clientX - target_rect.left;
var yy = e.clientY - target_rect.top;
xx=Math.round(xx);
yy=Math.round(yy);

xs.innerText=xx;
ys.innerText=yy;
}
</script>

Answer 1

<script>
window.onload=function(){
    divx.addEventListener('mousemove', xy);
}

function xy(e) {
    var target_rect = e.currentTarget.getBoundingClientRect();
    console.log(target_rect.width,target_rect.height);
    var xx = e.clientX - target_rect.left;
    var yy = e.clientY - target_rect.top;
    //xx=Math.round(xx);
    //yy=Math.round(yy);
    
    xs.innerText= Math.floor(xx/target_rect.width*100)+"%";
    ys.innerText= Math.floor(yy/target_rect.height*100)+"%";
}
</script>  

これで作動しているかと思います。

Comments

[hotmanz]

できるものなんですね、、、不可能だと思ってました
わざわざありがとうございます。感謝します。