前端学习记录——offset与client

最近在学js的时候遇到一些比较相似的点，想着把它们记下来，方便以后查看

offset：

offsetLeft 和 offsetTop 是到上一个有定位的距离 position:relative

若之前没有定位，则到body的距离

offsetHeigth：整个元素的高度，包括元素的边框和内边距

offsetWidth：整个元素的宽度，包括元素的边框和内边距

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>* {margin: 0;padding: 0;}.son {width: 100px;height: 100px;background-color: aquamarine;border: 50px solid #000;margin: 50px;padding: 50px;}</style>
</head><body><div class="son">content</div><script>var son = document.querySelector('.son');console.log(son.offsetLeft); // 50 margin:50console.log(son.offsetTop); // 50console.log(son.offsetWidth); // 300 width:100 + border:50+50 + padding:50 + 50 = 300console.log(son.offsetHeight); //300</script>
</body></html>

用图例来表示是：

client：

clientLeft 和 clientTop 左边框和上边框的距离

clientHeigth：元素的长度加上内边距的和

clientWidth：元素的宽度加上内边距的和

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>* {margin: 0;padding: 0;}.son {width: 100px;height: 100px;background-color: aquamarine;border: 50px solid #000;margin: 50px;padding: 50px;}</style>
</head><body><div class="son">content</div><script>var son = document.querySelector('.son');console.log(son.clientLeft); // 50 border的距离console.log(son.clientTop); // 50console.log(son.clientWidth); // 200 width:100 + padding:50 + 50 = 200console.log(son.clientHeight); // 200</script>
</body></html>

用图例来解释：

offset和client获取的值均不带单位，只返回数值

关于offsetLeft：

translate不会影响offsetLeft的值

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>* {margin: 0;padding: 0;}.father {position: relative;width: 400px;height: 400px;background-color: aqua;margin: 50px;}.son {position: absolute;top: 50%;left: 50%;width: 100px;height: 100px;background-color: aquamarine;transform: translate(-50%, -50%);border: 50px solid #000;}</style>
</head><body><div class="father"><div class="son">content</div></div><script>var father = document.querySelector('.father');var son = document.querySelector('.son');console.log(son.offsetLeft); // 200 left:50%=200px translate不影响console.log(son.offsetTop); // 200</script>
</body></html>

前端学习记录——offset与client相关推荐

前端学习记录 —— HTML篇（下）
前端学习记录 -- HTML篇(下) 一.表格标签 table,tr,td 1. 表格标题 <caption></caption><caption></cap ...
前端学习记录 —— JavaScript（一）
前端学习记录 -- JavaScript(一) 前言一.初识 JavaScript JavaScript 的特点 JavaScript的作用编程语言与标记语言的区别 HTML/CSS/JS 的关系 ...
前端学习记录13-CSS-(滑动门技术，微信导航栏实现，淘宝轮播图实现，图标字体实现，过渡效果，获得焦点元素)
前端学习记录13-CSS-滑动门技术,微信导航栏实现,淘宝轮播图实现,图标字体实现,过渡效果,获得焦点元素滑动门技术微信导航栏实现静态轮播图实现网上引用的图标字体设置过渡效果(transit ...
前端学习记录27-JavaScript-(作用域、预解析、自定义对象)
前端学习记录27-JavaScript-作用域.预解析.自定义对象作用域全局作用域局部作用域(函数作用域) 变量作用域全局变量局部变量作用域链预解析变量预解析函数预解析预解析经典面 ...
echarts引入geo地图数据，前端学习记录01
最近遇到项目需要使用使用geoJson数据在echarts上进行地图的绘制,仅使用此文记录学习的过程. 首先需要在项目中引入echart相关依赖,在package.json中添加如下依赖: " ...
仿作苏宁易购主页（前端学习记录）
通过初步的前端知识学习,大体上完成了苏宁易购首页的仿制,还请大家批评指正,谢谢! 具体代码如下 <!DOCTYPE html> <html lang="ch"&g ...
前端学习记录(十一) 一个“屡教不改”的错误
今天在学习jquery的contains用法,想利用contains控制表格内元素的显示与隐藏(在input内输入字符,对表格中的内容进行筛选) 刚开始,想在contains()的括号内之内填入inp ...
Web前端学习记录(十)
写在前面因为最近在学web前端,一般习惯用Google浏览器,所以找时间给她换了一个主题,十分的惬意,对着广阔无垠的浩瀚星海,对着满天的银光,就这样静静地坐着,心里就有了一片完整的星空. 使用Jav ...
Web前端学习记录(十五)
写在前面: 由于w小小的失误,这篇其实应该是(十二),害,这件事情说来话长,尽管想改一下名字,但时间的先后没办法呀,只好将错就错了. w:开始表演. y:视而不见. w:······ 实现shoppi ...

前端学习记录——offset与client

前端学习记录——offset与client相关推荐

最新文章

热门文章