Как мне преобразовать координату х в пиксели в JavaScript? - PullRequest
Новая
       56

Как мне преобразовать координату х в пиксели в JavaScript?

0 голосов
/ 07 июня 2018

У меня есть координата x, но я хочу преобразовать ее в пиксели, чтобы я мог расположить текстовое поле в месте относительно экрана.

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

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

1 Ответ

0 голосов
/ 07 июня 2018

Значение 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

Первоначально это был комментарий, перенесенный в ответ, поскольку он квалифицируется как действительный ответ на исходный вопрос.

...