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

Question

如何获得没有id但只定义了类的div的top.left，right和width。

<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

实施例

＆＃13;

＆＃13;

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

＆＃13;

{{1}}

＆＃13;

＆＃13;

＆＃13;