如何获得鼠标经过的元素的顶部，左侧？

Question

我想获取文档中鼠标经过的元素的 top-left 位置，但奇怪的是它告诉我它的所有样式都没有设置。例如，如果您在 Whosebug 或此页面中尝试以下代码，它应该给我们 question-header 的位置，但它打印为空。

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

如下所示：

我该如何正确操作？

Answer 1

试试这个


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

})

Answer 2

这是jquery代码

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

希望对您有所帮助。

Answer 3

使用 vanilla 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);
})

如何获得鼠标经过的元素的顶部，左侧？

How to get top,left of the element which mouse went over on it?

html

javascript

dom

mouseover

mouseevent