Как попасть вверху слева от элемента, на который наведена мышь?

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

Вот код jquery

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

Надеюсь, это вам поможет.

Answer 3

попробуйте

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

})