如何将 x 坐标转换为 javascript 中的像素？

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

这原本是一条评论 - 移入了一个答案，因为它符合对原始问题的有效答案。

如何将 x 坐标转换为 javascript 中的像素？

How do I convert an x coordinate to pixels in javascript?

html

javascript

css

css-position

pixels