html中得到鼠标位置代码

HTML中如何得到鼠标位置？ 如果你需要通过网页来获取用户的鼠标位置，那么在HTML中就需要用到JavaScript的一些功能。以下代码可以帮助你获取鼠标在当前页面的X和Y坐标。 首先，我们需要向页面添加一个JavaScript函数：

<script>
function getPosition(event) {
  var x = event.clientX;
  var y = event.clientY;
  var position = "X坐标: " + x + "<br>Y坐标: " + y;
  document.getElementById("position").innerHTML = position;
}
</script>

这个函数包含了两个变量x和y，分别表示鼠标在当前页面中的X和Y坐标。我们将这两个变量放在一个字符串中，并且使用innerHTML将它们展示在页面上。 接下来，我们需要在HTML中添加一个元素，用来展示鼠标的位置：

<p>请移动鼠标到下面这个盒子中:</p>
<div id="Box" onmousemove="getPosition(event)"></div>
<p id="position"></p>

在这个代码中，我们使用了一个div元素，并添加了一个onmousemove事件处理程序。这个事件将会触发之前编写的getPosition函数，来获取鼠标在当前页面中的位置。 最后，我们需要定义CSS样式来定义div元素的样式：

#Box {
  width: 200px;
  height: 200px;
  background-color: lightgray;
  border-radius: 5px;
}

这个CSS样式将会让我们的div元素变成一个灰色的方块，它的宽度和高度都是200px，并且使用了5px的边框弧度。 总结 通过上述的代码，我们可以在HTML中轻松地获取鼠标在页面中的位置。如果需要，我们还可以通过JavaScript的其他功能，来对鼠标位置做更多的操作。