JS-元素尺寸与位置

通过js的方式,得到元素在页面中的位置

获取宽高

元素.offsetWidth
元素.offsetHeight

1)获取元素的自身宽高、包括元素自身设置的宽高+padding+border

2)获取出来的是数值,方便计算

3)注意:获取的是可视宽高,如果盒子是隐藏的,获取的结果是0

获取位置

方法一:

元素.offsetLeft
元素.offsetTop

1)获取元素距离自己定位父级元素的左、上距离(与最近一级带有定位的祖先元素;如果没有则以文档左上角为准)

2)注意是只读属性

方法二:

element.getBoundingClientRect()

方法返回元素的大小及其相对于视口的位置

JS-元素尺寸与位置_第1张图片

JS-元素尺寸与位置_第2张图片

你可能感兴趣的:(JS,javascript,前端,开发语言)