js、jq、vue、小程序获取dom元素的尺寸与位置

每个HTML元素都有下列属性
clientWidth clientHeight clientLeft clientTop
offsetWidth offsetHeight offsetLeft offsetTop
scrollWidth scrollHeight scrollLeft scrollTop

css盒模式
内容区域、内边距、边框、外边距
content、padding、border、margin

clientWidth = content+padding
（有滚动条时需要减去滚动条的宽度，ie下还会包括border）

clientLeft, clientTop: clientLeft为左边框宽度，clientTop为上边框宽度

offsetWidth = content+padding+border

offsetLeft/offsetTop: 表示该元素相对于最近的定位祖先元素的距离.

• 定位指的是position: relative|absolute|fixed, 没有定位父元素则相对于整个文档的边缘.
• 距离是定位父元素边框内边, 到当前元素边框外边之间的距离

scrollWidth/scrollHeight:

• 内容未溢出: padding+content, 相等于clientHeight/clientWidth
• 内容溢出: 溢出内容实际占得高度, 即不管溢出内容是否隐藏高度都计算在内

scrollLeft, scrollTop: 在滑动条将页面向上, 向左滑动时, 页面向上, 向左被卷曲的高度和宽度

获取元素相对位置和绝对位置

下面两个函数可以用来获取元素绝对位置(相对于页面)的横坐标和纵坐标。

element.offsetParent: 获取离元素最近的定位祖先元素

function getElementLeft(element){
    var actualLeft = element.offsetLeft;
    var current = element.offsetParent;
    while (current !== null){
        actualLeft += current.offsetLeft;
        current = current.offsetParent;
    }
    return actualLeft;
}
function getElementTop(element){
    var actualTop = element.offsetTop;
    var current = element.offsetParent;
    while (current !== null){
        actualTop += current.offsetTop;
        current = current.offsetParent;
    }
    return actualTop;
}

由于在表格和iframe中，offsetParent对象未必等于父容器，所以上面的函数对于表格和iframe中的元素不适用。

有了绝对位置以后，获得相对位置(相对于浏览器窗口)就很容易了，只要将绝对坐标减去页面的滚动条滚动的距离就可以了。滚动条滚动的垂直距离，是document对象的scrollTop属性；滚动条滚动的水平距离是document对象的scrollLeft属性。

function getElementViewLeft(element){
    var actualLeft = element.offsetLeft;
    var current = element.offsetParent;
    while (current !== null){
    　actualLeft += current.offsetLeft;
    　current = current.offsetParent;
    }
    if (document.compatMode == "BackCompat"){
    　var elementScrollLeft=document.body.scrollLeft;
    } else {
    　var elementScrollLeft=document.documentElement.scrollLeft; 
    }
    return actualLeft-elementScrollLeft;
}
function getElementViewTop(element){
    var actualTop = element.offsetTop;
    var current = element.offsetParent;
    while (current !== null){
    　actualTop += current. offsetTop;
    　current = current.offsetParent;
    }
    if (document.compatMode == "BackCompat"){
    　var elementScrollTop=document.body.scrollTop;
    } else {
    　var elementScrollTop=document.documentElement.scrollTop; 
    }
    return actualTop-elementScrollTop;
}

还可以通过调用元素的getBoundingClientRect方法。方法返回一个有left、right、top、bottom属性的对象，分别表示元素四个位置的相对于视口的坐标。getBoundingClientRect所返回的坐标包含元素的内边距和边框，不包含外边距。兼容性很好，非常好用

VUE

也就是获取元素的方式不同，用 let item = this.$refs.xxx.$el;

其他也就是js的用法let itemOffset = item.offsetLeft;let itemWidth = item.clientWidth ;

以及getBoundingClientRect方法

jQuery

位置

• offset: 获取匹配元素在当前视口的相对偏移
• position: 获取匹配元素相对父元素的偏移
• scrollTop: 获取匹配元素相对滚动条顶部的偏移
• scrollLeft: 获取匹配元素相对滚动条左侧的偏移

尺寸

• height: 取得匹配元素当前计算的高度值
• width: 取得第匹配元素当前计算的宽度值
• innerHeight: 获取第匹配元素内部区域高度（包括补白、不包括边框）
• innerWidth: 获取第匹配元素内部区域宽度（包括补白、不包括边框）
• outerHeight: 获取第匹配元素外部高度（默认包括补白和边框）接受一个布尔值参数, 默认为false, 设置true时, 计算外边距在内
• outerWidth: 获取第匹配元素外部高度（默认包括补白和边框）接受一个布尔值参数, 默认为false, 设置true时, 计算外边距在内

微信小程序

const query = wx.createSelectorQuery().in(this)
//SelectorQuery.in (对应的组件)
//将选择器的选取范围更改为自定义组件 component 内
//初始时，选择器仅选取页面范围的节点，不会选取任何自定义组件中的节点

query.selectAll(queryClass).boundingClientRect(function(rect){
      rect.id      // 节点的ID
      rect.dataset // 节点的dataset
      rect.left    // 节点的左边界坐标
      rect.right   // 节点的右边界坐标
      rect.top     // 节点的上边界坐标
      rect.bottom  // 节点的下边界坐标
      rect.width   // 节点的宽度
      rect.height  // 节点的高度
 })

参考资料

JS & jQuery 获取元素位置尺寸

JavaScript获取DOM元素位置和尺寸大小

微信小程序如何获取元素节点信息？