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：MSDN

这最初是一条评论 - 因为它符合原始问题的有效答案而被转移到答案中。

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

1 个答案: