如何在javascript中将x坐标转换为像素？答案

【问题标题】：How do I convert an x coordinate to pixels in javascript?如何在javascript中将x坐标转换为像素？
【发布时间】：2018-06-07 23:58:12
【问题描述】：

我有一个 x 坐标，但我想将其转换为像素，以便将文本字段定位在相对于屏幕的位置。

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

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

【问题讨论】：

您可以在 css 中使用相对单位。如果您希望元素始终距顶部 20%，请使用 20% 而不是尝试计算 20% 是多少像素。
clientX 的值已经是相对于屏幕的像素。你可以在这支笔上看到一个例子：codepen.io/rhericlya/pen/mKrgEy
谢谢。我没有澄清这一点，但我正在使用一个名为 amcharts 的图形库，并且我使用了一个可以向图表添加注释（带名称）的功能。我试图添加一个功能，如果您单击带注释的区域，则会在当前名称文本的顶部出现一个文本框。我有注释开始和结束的 x 坐标，所以我最初将文本字段定位在注释中心的 x 坐标处。但是，我意识到盒子是从中心开始的，而不是从中心开始的。我得到了 txtbox 的 x val 并除以 2 来找到向左移动框的距离

标签： javascript html css css-position pixels

【解决方案1】：

clientX 值已经是相对于屏幕的像素。您可以在下面的 sn-p 中看到一个示例：

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

这最初是一条评论 - 移到答案中，因为它有资格作为原始问题的有效答案。

【讨论】：

你能把代码复制进去吗？以防万一codepen消失之类的。
道歉，试图避免在 HTML / CSS 方面混淆答案。搬家了。
为未来的访问者参考一些文档可能会很好：developer.mozilla.org/en-US/docs/Web/API/MouseEvent/clientX
好建议
感谢大家快速准确的回复，非常感谢！