Javascript 如何得到元素的顶部，左边哪个鼠标在上面？

我想在鼠标移到元素上的文档中获取元素的左上角位置，但奇怪的是，它告诉我它的所有样式都没有设置。例如，如果您在stackoverflow或此页面中尝试下面的代码，它应该为我们提供问题标题的位置，但打印为空

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

如下图所示：

我该如何正确地做呢？

试试这个

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

})

---

这是jquery代码

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

---

希望这对您有所帮助。

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

document.getElementById（“问题标题”）.addEventListener（“鼠标悬停”，（e）=>{
常量元素=e.target.getBoundingClientRect（）；
const left=element.left；
const top=element.top；
常量宽度=element.width；
常数高度=元素高度；
log（`Left:${Left}，Top:${Top}，Width:${Width}，Height:${Height}`）；
})

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

document.getElementById（“问题标题”）.addEventListener（“鼠标悬停”，（e）=>{
常量元素样式=getComputedStyle（如目标）；
console.log（elementStyles）；
})

你能提供你的css代码吗？在同一页的控制台中尝试这个答案，ypu将获得值。谢谢你的答案，你能告诉我们如何获得目标元素的其他样式吗？（看起来宽度和高度在变化，为什么？）@SeyyedKhandon I使用片段更新了原始答案，以从元素中获取样式。