javascript - 使用 div 类获取 div 的确切位置

Question

如何获取没有 id 但只定义了类的 div 的顶部、左侧、右侧和宽度。

<div class="content">
</div> 

我想使用内容类获取屏幕上的确切位置。可以使用 jqyery 吗？？

Answer 1

您可以使用 getBoundingClientRect() 获取 top、left 和 right 值。对于 width，如果未在任何地方定义宽度，您可以使用 offsetWidth。

如果 width 是内联定义的，您可以使用 element.style.width，如果它是在样式表中定义的，您可以使用 getComputedStyle(element).

如果你想获得所有类为content的元素的值，你必须逐个循环遍历它们；否则只需删除 for 循环并放入 0 而不是 i。

var content = document.getElementsByClassName('content');

for (i = 0; i < content.length; i++) {
  console.log(content[i].getBoundingClientRect().top) //top
  console.log(content[i].getBoundingClientRect().left) //left
  console.log(content[i].getBoundingClientRect().right) //right
  console.log(content[i].offsetWidth); //width
}

示例:

 var content = document.getElementsByClassName('content')[0];

 console.log(content.getBoundingClientRect().top) //top
 console.log(content.getBoundingClientRect().left) //left
 console.log(content.getBoundingClientRect().right) //right
 console.log(content.offsetWidth); //width

<div class="content"></div>