javascript - 如何找到自动定位元素的位置？

Question

我正在尝试制作一个隐藏游戏，您可以在其中在屏幕上移动单词中的一个字母。句子的位置是相对的，但字母的位置是绝对的，所以如果没有设置它的位置，它会保持在句子中的位置。但我似乎无法使用 javascript 访问该位置。

window.addEventListener("keydown", hidgame, false);

var vertpos; // = don't know what to put after the variables to get the top and left position.
var horipos; 

function hidgame(event) {
	if (event.keyCode == "38") {
		vertpos--
		document.getElementById("hidgame").style.top = vertpos + "px";
	}
        if (event.keyCode == "40") {
		vertpos++
		document.getElementById("hidgame").style.top = vertpos + "px";
	}
        if (event.keyCode == "37") {
		horipos--
		document.getElementById("hidgame").style.left = horipos + "px";
	}
        if (event.keyCode == "39") {
		horipos++
		document.getElementById("hidgame").style.left = horipos + "px";
	}

#subtitle {
	width: 100%;
	text-align: center;
}

#hidgame {
	position: absolute;
	color: red;
}

<div id="subtitle">Hidden G<span id="hidgame">a</span>&nbsp;&nbsp;me</div> <!--The &nbsp; is only there to fill the space because the span is absolute-->

Answer 1

要确定位置，请使用 Element.getBoundingClientRect() .

此外，考虑将您的元素存储为变量而不是反复查找它。

window.addEventListener("keydown", hidgame, false);

var letter  = document.getElementById("hidgame");
var vertpos = letter.getBoundingClientRect().top;
var horipos = letter.getBoundingClientRect().left;

function hidgame(event) {
  if      (event.keyCode == "38") vertpos--; //up
  else if (event.keyCode == "40") vertpos++; //down
  else if (event.keyCode == "37") horipos--; //left
  else if (event.keyCode == "39") horipos++; //right

  letter.style.top  = vertpos + "px";
  letter.style.left = horipos + "px";
}

#subtitle {
  width: 100%;
  text-align: center;
}

#hidgame {
  position: absolute;
  color: red;
}

<div id="subtitle">Hidden G<span id="hidgame">a</span>&nbsp;&nbsp;me</div>
<!--The &nbsp; is only there to fill the space because the span is absolute-->