记住我们的口号 : 偶买嘎~ 偶买嘎~ 偶偶买嘎嘎~
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
