记住我们的口号 : 偶买嘎~ 偶买嘎~ 偶偶买嘎嘎~

1.jpg

一个元素 在页面中存在 肯定存在很多信息 元素的尺寸 . 元素的位置.元素的宽高等等..

这里我们讲解几个常用获取方法的api

1 : 获取元素宽度 offset

1.1 书写方式 :

var warp = document.querySelector("元素");

console.log(warp.offsetWidth) //获取元素的宽度

1.2 视图 :

52.png

2 : 获取元素高度 offset

2.1 书写方式 :

var warp = document.querySelector("元素");

console.log(warp.offsetHeight) //获取元素的高度

2.2 视图

53.png

3 : 获取元素上偏移量 和 左偏移量 offset

3.1 书写方式 :

var warp = document.querySelector("元素");

console.log(warp.offsetTop); // 上偏移量
console.log(warp.offsetLeft); // 左偏移量

3.2 视图 : 在父级没有定位属性下的情况

54.png

3.3 视图 : 在父级有定位属性下的情况

55.png

4 : 获取元素宽度 client

4.1 书写方式 :

var warp = document.querySelector("元素");

console.log(warp.clientWidth); //获取元素的宽度

4.2 视图 :

56.png

5 : 获取元素高度 client

5.1 书写方式 :

var warp = document.querySelector("元素");

console.log(warp.clientHeight) //获取元素的高度

5.2 视图 :

57.png

6 : 中级方案 : 直接获取元素的全部信息

一个视图 一目了然 :

58.png

51.jpeg

各位看官老爷 几个简单的获取方法 你们 学废了嘛?

可能 有很多 更详细的 资料没有给 看官老爷提供
因为 : 时间的原因 原谅解... 谢谢

后续一定更加精致 不喜勿喷
留下大佬 您最好的建议 给予我这个{ 萌新 }最好的帮助
今日打卡 : 2020.05.29