vue获取不到元素的top但能获取width_元素大小三剑客-CSDN博客

Offset- 偏移量

定义：元素在屏幕上占用的所有可见的空间

元素可见的大小由其高度、宽度决定，包括所有内边距，滚动条和边框大小

四个属性

CSS

<style>

.son {

width: 100px;

height: 100px;

padding: 10px;

border: 10px solid #ccc;

}

.father {

width: 140px;

height: 140px;

padding: 10px;

border: 10px solid black;

}

.grand {

width: 180px;

height: 180px;

margin: 100px;

padding: 10px;

border: 10px solid orange;

}

</style>

HTML

</div>

offsetHeight:

元素在垂直方向上占用的大小空间，px；

元素的高度度，水平滚动条的高度 + 上下边框的高度

offsetWidth:

元素在水平方向上占用的空间大小，px

元素的宽度，垂直滚动条的宽度、左边框和右边框

var grand = document.getElementsByClassName('grand')[0];

var father = document.getElementsByClassName('father')[0];

var son = document.getElementsByClassName('son')[0];

console.log(grand.offsetHeight); // 220

console.log(grand.offsetWidth); // 220

offsetLeft

元素的左外边框至包含元素的左内边框之间的像素距离

offsetTop

元素的上外边框至包含元素的上内边框之间的像素距离

offsetParent

offsetLeft与offsetTop属性与包含元素有关，包含元素的引用保存在offsetParent属性中

offsetParent属性不一定与parentNode的值相等

其实看看父元素们是否有position:定位属性

console.log(son.offsetParent); // <body></body>

console.log(son.offsetLeft); // 148 // body的8pxmargin

console.log(son.offsetTop); // 140

当我们修改完某个父元素的一个position

grand.style.position = 'relative';

console.log(son.offsetParent); // grand作为了包含元素

console.log(son.offsetLeft); // 30

console.log(son.offsetTop); // 30

可以封装一个方法，一直获取到最顶层的距离

function getOffset(ele) {

var offset = {

top: 0,

left: 0

}

while (ele.offsetParent) {

offset.top += ele.offsetTop;

offset.left += ele.offsetLeft;

ele = ele.offsetParent;

console.log(ele, offset); // grand {left: 138, top: 130}

// body {top: 130, left: 138}

}

return offset;

}

console.log(getOffset(son)); // {top: 130, left: 138}

客户区大小

元素的客户区大小（client dimension），指的是元素内容及其内边距所占据的空间大小

clientWidth

元素内容区宽度 + 左右内边距宽度

clientHeight

元素内容区高度 + 上下内边距高度

可以用其获取浏览器视口大小

function getView() {

return {

w: document.body.clientWidth || document.documentElement.clientWidth,

h: document.body.clientHeight || document.documentElement.clientHeight

}

Scroll滚动的大小

滚动大小：指的是包含滚动内容的元素的大小

scrollHeight：在没有滚动条的情况下，元素内容的总高度

scrollWidth: 在没有滚动条的情况下，元素内容的总宽度

<body>

</div>

</body>

console.log(son.scrollHeight); // 120 // 在没有滚动条的情况(子元素内容未超出情况下)下

内容超出的情况：

四大皆空来得及啊电视机卡十九大达科技的萨克

可视对讲阿克苏进度款垃圾的卡死了的健康垃圾

肯德基卡萨阶段啦科技的卡拉胶打开链接的垃圾

打卡大抗裂砂浆打卡机打卡机的刷卡机的拉家带

口杀戮空间打卡机的阿克苏交大老师就打开打开

手机端

</div>

console.log(son.scrollHeight); // 409 // 在子元素内容超出的情况下

scrollLeft: 被隐藏在内容区域左侧的像素值，通过设置这个属性可以改变元素的滚动位置

scrollTop: 被隐藏在内容区域上方的像素值，通过设置这个属性可以改变元素的滚动位置

scrollWidth和scrollHeight主要用于确定元素内容的实际大小

var docHeight = Math.max(document.documentElement.scrollHeight, document.documentElement.clientHeight);

var docWidth = Math.max(document.documentElement.scrollWidth, document.documentElement.clientWidth);

4. 视口位置

1. var rect = element.getBoundingClientRect(无)用于获取某个元素相对于视口的位置集合。

2. 集合中有top, right, bottom, left等属性。

rect.top: 元素上边到视口顶部的距离;

rect.right: 元素右边到视口左边的距离;

rect.bottom: 元素下边到视口底部的距离;

rect.left: 元素左边到视口左边的距离

var rect = divEle.getBoundingClientRect();

// 获取元素的宽高(包括边框)

var rectWidth = rect.right - rect.left;

var rectHeight = rect.bottom - rect.top;

console.log(rectWidth, rectHeight); // 112 212

参考 <<高级语言程序设计>>

转载自【简书--贝程学院_前端】