每个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元素位置和尺寸大小
微信小程序如何获取元素节点信息？