如何在JavaScript中將x坐標轉換為像素？

Question

我有一個x坐標，但是我想將其轉換為像素，以便可以將文本字段放置在相對於屏幕的位置。

    var div = document.getElementById('div');
    var xVal = event.clientX;
    var pxVal = xVal.convertToPx();

    div.style.top = pxVal + 'px';

Answer 1

clientX值已經相對於屏幕以像素為單位。 您可以在下面的代碼段中看到一個示例：

 var x = document.getElementById("div"); x.addEventListener('click',function(event){ document.getElementById("feedback").innerHTML = event.clientX + 'px from left'; }) 

 body { margin-left:0px; } #div { width:200px; height:70px; position:absolute; top:50px; left:70px; background:red; } #feedback { position:absolute; left: 100px; top:130px; } ul { list-style:none; padding-left:0px; } li { border-left:1px solid black; display:block; float:left; width:100px; padding-left:10px; box-sizing:border-box; } 

 <div id="div"></div> <div class="ruler"> <ul> <li>0</li> <li>100</li> <li>200</li> <li>300</li> </ul> </div> <div id="feedback"></div> 

---

您可以在此處閱讀有關clientX更多信息： MouseEvent.clientX

---

這最初是評論-移至答案，因為它有資格成為原始問題的有效答案。