js里取容器大小、定位、距离等属性搜集整理

在JavaScript中，获取元素的位置、大小、距离等属性是开发中经常使用的操作，以下是获取常用属性的完整攻略：

获取元素大小

获取元素的大小（宽度和高度）有不同的方法，其中包括：

通过clientWidth和clientHeight

clientWidth或clientHeight属性返回元素的可见宽度和高度（不包括滚动条）。

const element = document.getElementById("myDiv");
const width = element.clientWidth;
const height = element.clientHeight;

通过offsetWidth和offsetHeight

offsetWidth或offsetHeight属性返回元素的整体宽度和高度（包括边框和滚动条）。

const element = document.getElementById("myDiv");
const width = element.offsetWidth;
const height = element.offsetHeight;

通过getBoundingClientRect

getBoundingClientRect方法可以返回元素相对于视口的位置和大小。

const element = document.getElementById("myDiv");
const rect = element.getBoundingClientRect();
const width = rect.width;
const height = rect.height;

获取元素位置

获取元素的位置有多种方法，以下是其中一些方法：

通过offsetLeft和offsetTop

offsetLeft和offsetTop属性返回元素相对于其最近的position属性不为static的父元素的左上角的距离。

const element = document.getElementById("myDiv");
const left = element.offsetLeft;
const top = element.offsetTop;

通过getBoundingClientRect

getBoundingClientRect方法可以返回元素相对于视口的位置和大小。

const element = document.getElementById("myDiv");
const rect = element.getBoundingClientRect();
const left = rect.left;
const top = rect.top;

获取元素距离

获取元素与其他元素的距离有不同的方法，以下是其中一些方法：

通过offsetLeft、offsetTop和getBoundingClientRect

使用元素A和元素B的offsetLeft、offsetTop和getBoundingClientRect属性，可以计算出元素A和元素B之间的距离。

const elementA = document.getElementById("myDivA");
const elementB = document.getElementById("myDivB");
const rectA = elementA.getBoundingClientRect();
const rectB = elementB.getBoundingClientRect();
const distance = Math.sqrt(Math.pow(rectA.left - rectB.left, 2) + Math.pow(rectA.top - rectB.top, 2));

通过getComputedStyle

getComputedStyle方法可以返回元素的计算样式，包括距离。

const elementA = document.getElementById("myDivA");
const elementB = document.getElementById("myDivB");
const styleA = getComputedStyle(elementA);
const styleB = getComputedStyle(elementB);
const distanceX = parseInt(styleA.left, 10) - parseInt(styleB.left, 10);
const distanceY = parseInt(styleA.top, 10) - parseInt(styleB.top, 10);
const distance = Math.sqrt(Math.pow(distanceX, 2) + Math.pow(distanceY, 2));

以上是获取元素大小、位置和距离的一些常用方法。在实际开发中，可以根据具体情况选择合适的方法。