如何获得鼠标悬停在其上方的元素的左上角？

Question

我想获得鼠标在其上移动过的文档中元素的左上角位置，但是奇怪的是，这告诉我所有样式都尚未设置。例如，如果您尝试下面的代码在stackoverflow中或在此页面中，它应该给我们提供问题标题的位置，但它显示为空白。

document.getElementById("question-header").addEventListener("mouseover",(e)=>{
console.log(e.target.style.top )
})

如下所示：

我应该如何正确做？

Answer 1

使用香草js，您可以执行以下操作：

document.getElementById("question-header").addEventListener("mouseover",(e)=>{
  const element = e.target.getBoundingClientRect();
  const left = element.left;
  const top = element.top;
  const width = element.width;
  const height = element.height;

  console.log(`Left: ${left}, Top: ${top}, Width: ${width}, Height: ${height}`);
})

如果需要获取所有计算出的样式，则可以执行以下操作：

document.getElementById("question-header").addEventListener("mouseover",(e)=>{
  const elementStyles = getComputedStyle(e.target);
  console.log(elementStyles);
})

Answer 2

尝试一下

document.getElementById("question-header").addEventListener("mouseover",function(event) {
  var x = event.clientX;
  var y = event.clientY;
 console.log(x,y);

})

Answer 3

这是jQuery代码

$(document).mouseover(function(){
  var x = $("#question-header").position();
  console.log("Top: " + x.top + " Left: " + x.left);
});

希望对您有帮助。